What’s new in Angular 13
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
, andminLength
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 toNavigationCancel
events and conduct thereplaceState
themselves to addnavigationId
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 usingwrappedValue
are used. Usage ofwrappedValue
should be removed. - The behavior of the
SpyLocation
used by theRouterTestingModule
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 fromstring
toFormControlStatus
andStatusChanges
have been narrowed fromObservable<any>
toObservable<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.