angular / 13.3.8 / guide / update-to-latest-version.html /

Update Angular

This guide contains information to update to Angular version 13.

Update Angular CLI applications

For step-by-step instructions on how to update to the latest Angular release and leverage the Angular automated migration tools, use the interactive update guide at update.angular.io.

Changes and deprecations in version 13

For information about the deprecation and removal practices of Angular, see Angular Release Practices.

Breaking changes in Angular version 13

Details
PR #43642 TypeScript versions older than 4.4.2 are no longer supported.
PR #43740 NodeJS versions older than v12.20.0 are no longer supported. The Angular packages now use the NodeJS package exports feature with subpath patterns and requires a NodeJS version above 14.15.0 or 16.10.0.
PR #31187 Previously, the default url serializer dropped everything after and including a question mark in query parameters. That is, for a navigation to /path?q=hello?&other=123, the query parameters parsed to just {q: 'hello'}. This is incorrect, because the URI spec allows for question mark characers in query data. This change now correctly parses the query parameters for /path?q=hello?&other=123 as {q: 'hello?', other: '123'}.
PR #41730 The behavior of the SpyLocation used by the RouterTestingModule has changed to match the behavior of browsers. It no longer emits a popstate event when Location.go is called. In addition, simulateHashChange now triggers both a hashchange event and a popstate event. Tests that use location.go and expect the changes to be picked up by the Router should migrate to simulateHashChange. Each test is different in what it attempts to assert, so there is no single change that works for all tests. Each test that uses the SpyLocation to simulate changes in the browser URL should be evaluated on a case-by-case basis.
PR #42952 A new type called FormControlStatus has been introduced, which is a union of all possible status strings for form controls. AbstractControl.status has been narrowed from string to FormControlStatus, and statusChanges has been narrowed from Observable<any> to Observable<FormControlStatus>. Most applications should consume the new types seamlessly. Any breakage caused by this change is likely due to one of the following two problems:
  1. The app is comparing AbstractControl.status against a string which is not a valid status.
  2. The app is using statusChanges events as if they were something other than strings.
PR #43087 Previously ,null and undefined inputs for routerLink were equivalent to empty string and there was no way to disable the navigation of the link. In addition, the href is changed from a property HostBinding() to an attribute binding (HostBinding('attr.href')). The effect of this change is that DebugElement.properties['href'] now returns the href value returned by the native element which is the full URL rather than the internal value of the RouterLink href property.
PR #43496 The router no longer replaces the browser URL when a new navigation cancels an ongoing navigation. The replacement of the browser URL often caused URL flicker and was only in place to support some AngularJS hybrid applications. Hybrid applications which rely on the presence of navigationId on each initial navigation handled by the Angular router should instead subscribe to NavigationCancel events and manually perform the location.replaceState to add navigationId to the Router state.In addition, tests that assert urlChanges on the SpyLocation should be adjusted to account for the lack of the replaceState trigger.
PR #43507 The WrappedValue class is no longer imported from @angular/core. This change may result in compile errors or failures at runtime, if outdated libraries are used that rely on WrappedValue. Dependancy on WrappedValue should be removed since no replacement is available.
PR #43591 It is no longer possible to use Route.loadChildren with a string value. The following supporting classes were removed from @angular/core:
  • NgModuleFactoryLoader
  • SystemJsNgModuleFactoryLoader
The @angular/router package no longer exports the following symbols:
  • SpyNgModuleFactoryLoader
  • DeprecatedLoadChildren
The signature of the setupTestingRouter function from @angular/core/testing was changed to drop the NgModuleFactoryLoader parameter, since an value for that parameter can not be created.
PR #43668 The return type of SwUpdate#activateUpdate and SwUpdate#checkForUpdate changed to Promise<boolean>.Although unlikely, this change may cause TypeScript type-checking to fail in some cases. If necessary, update your types to account for the new return type.
PR #43791 When storing and retrieving a DetachedRouteHandle, the Router traverses the Route children in order to correctly allow storing a parent route when there are several possible child Route configs that can be stored. This allows a RouteReuseStrategy to store a parent Route and a child, while preserving the ability to change the child route while restoring the parent. Some implementations of RouteReuseStrategy will need to be updated to correctly store and retrieve the DetachedRouteHandle of descendants as well as the stored parent ActivatedRouteSnapshot. Previously, the Router would only store the parent, making it impossible to change descendant paths when a parent stored was retrieved. See Issue #20114
Issue #22159 Scripts that load via dynamic import() are now treated as ES modules (meaning they must be strict mode-compatible).

New deprecations

Removed Replacement Details
getModuleFactory getNgModuleById
Factory-based signature of ApplicationRef.bootstrap Type-based signature of ApplicationRef.bootstrap Use the Type-based signature in place of the Factory-based signature.
PlatformRef.bootstrapModuleFactory PlatformRef.bootstrapModule
ModuleWithComponentFactories none
Compiler none
CompilerFactory none
NgModuleFactory Non-factory based framework APIs Use the non-factory based framework APIs, such as PlatformRef.bootstrapModule and createNgModuleRef.
Factory-based signature of ViewContainerRef.createComponent Type-based signature of ViewContainerRef.createComponent Use the Type-based signature in place of the Factory-based signature.
aotSummaries parameter of the TestBed.initTestEnvironment method none
aotSummaries parameter of the TestModuleMetadata type none
renderModuleFactory renderModule
SwUpdate#activated SwUpdate#activateUpdate() Use the return value of SwUpdate#activateUpdate().
SwUpdate#available SwUpdate#versionUpdates
bind-input="value" [input]="value"
bind-animate-trigger="value" [@trigger]="value"
on-click="onClick()" (click)="onClick()"
bindon-ngModel="value" [(ngModel)]="value"
ref-templateRef #templateRef
Last reviewed on Mon Feb 28 2022

© 2010–2022 Google, Inc.
Licensed under the Creative Commons Attribution License 4.0.
https://v13.angular.io/guide/update-to-latest-version

Name Angular
Version
Badge
Last Updated 2022-06-02T20:33:34Z