[Updated] A Quick Update on Angular 13 Release

Google’s TypeScript based framework Angular gets a major production release every six months. Angular 13 production release is finally rolled out and developers can do ng-update in their project to get this latest version.

Here are the major updates regarding the Angular 13 release.

Form Changes

A new type called FormControlStatus has been added. This is the union of all possible status strings for form controls. Most of the applications are expected to consume this change without any error.

Unfortunately, if there is an error because of this new addition, then the problem is most likely with comparing AbstractControl.status with string or that the app is using statusChanges events as if they were something other than strings.

router changes

Before going through this change, let’s consider one scenario.

Consider you have the following query parameters:

/path?q=hello?&other=123

The default URL serializer would drop everything after and including a question mark in query parameters. This will leave us with a parameter {q: ‘hello’} that is not correct.

This is because URI specs discard everything after 2nd ? in query parameters.

There is a proposed fix in Angular 13 that will parse the above query parameters to {q: 'hello?', other: '123'}.

Following are the high-level updates of Angular 13, you can find more updates here.

• TypeScript versions older than 4.4.2 are no longer supported.
• The return type of SwUpdate#activateUpdate and SwUpdate#checkForUpdate changed to Promise.
• The SwUpdate#activated observable is deprecated.
• The SwUpdate#availalbe observable is deprecated.
• NodeJS versions older than v12.20.0 are no longer supported due to the Angular packages using the NodeJS package exportsfeature with subpath patterns.

• Dynamic enabling/disabling of min/max validators for forms is added.
• Form statuses will use stricter types.
• Added strict_templates and experimental_extended_template_diagnostics to ng_module() rule
• Now you can create transitions to enable partial compilation
• manifest file creation even if there are warnings are allowed now.
• Node version 16 is added
• @angular/platform-browser incorrect peer dependency is removed.
• Multiple times external temlate updation is prevented while doing migrations.
• New activate/deactivate events added and will get emitted when an outlet get attached/deatached in router.
• New output is added to routerLinkActive directive.
• The new behavior of the routerLink input will be to completely disable navigationfor null and undefined inputs.
• We can make changes to the Router which depend on actual browser behavior rather than incorrectly mocked test behavior.
• The router will no longer replace the browser URL when a new navigationcancels an ongoing navigation. This will avoid URL flicker.
• It is no longer possible to use Route.loadChildren using a stringvalue.

Here is the quick update on #Angular 13 planned release.https://t.co/GTyga6crPR

— Code Topology (@CodeTopology) August 15, 2021