Before updating your Angular, Let's explore Angular 13, what's new and what's changed! to understand Angular 13 comprehensively.

Index

1. Prerequisites
2. Update Guide
1. Migration using npx
2. Migration using npm
3. Induced code behaviour
1. Navigation
2. Deprecations in SwUpdate
3. AbstractControl
4. Testing

Prerequisites

1. Node 16.13.2 LTS (Recommended) (Node 12.20.0 or later works just fine)
2. TypeScript 4.4

RxJS

RxJS v7.4 is now the default for apps created with Angular v13. Any project using RxJS v6.x can be updated manually by using the command:

npm install rxjs@7.4

TypeScript

Support for TypeScript 4.6 is added in Angular 14. Get started with TypeScript 4.6 through NuGet or use npm with the commands:

npm install -g typescript@4.6

Update Guide

Save your work to git repository. It's a good practice to save a copy of your project separately if you don't have a git repository.

Check Repository is not clean. Please commit or stash any changes before updating ? if you need any assistance.

An angular application can be updated to latest version in two ways. It's just a matter of convenience there's no deep meaning or technical variation of end results between the two types.

1. npx
2. npm

a. Migration using npx

The following guide provides a step-by-step procedure to migrate from Angular v12 to Angular v13 using the npx. If you have multiple projects but you intend to deal with a specific project then it doesn't make sense to update the global environment. This step is apt for you as it helps you update only your specific application with minimal global traces.

1. Run the following command inside your application, which should bring it to Angular v13

npx @angular/cli@13 update @angular/core@13 @angular/cli@13

2. If Angular Material is used in the project it can be updated to version 13 using the following command

npx @angular/cli@13 update @angular/material@13

b. Migration using npm

The following guide provides a step-by-step procedure to migrate from Angular v12 to Angular v13 using the npm. If you have only one project (or) if you have multiple projects but you intend to migrate them all then this guide is apt for you.

1. Make sure node_modules is present inside your application. The command to get node_modules inside your project is npm install (or) npm i

2. Running the following command inside your project will bring it to version 13 of Angular

ng update @angular/core@13 @angular/cli@13

4. If Angular Material is used in the application it can be updated using the following command

npx @angular/cli@13 update @angular/material@13

ng update

The above command will take care of

• Drop the IE specific polyfills and reduce the corresponding bundle size
• Angular now requires TypeScript 4.4, ng update will update you automatically.
• Deliver more accessible angular material components out of the box

After the execution of the command, the terminal will display the entities that still need to be updated along with corresponding commands to update them. It will only be displayed if something needs to be updated.

Induced code behaviour

Navigation

• routerLink navigation can be disabled by passing undefined and null
• Lazy-loaded routes can't be specified by setting a string value to loadChildren
• href is now an attribute binding. Hence, DebugElement.properties['href'] now returns the href value returned by the native element, rather than the internal value of the href property of the routerLink
• The route package no longer exports SpyNgModuleFactoryLoader and DeprecatedLoadChildren. In case you use them, make sure you remove their corresponding import statements.
• The URL serializer will now respect question marks in the query parameters. This is to align with the URI spec.
  Example/path?q=hello?&q2=2 will now be parsed to { q:hello?, q2: 2 }

Deprecations in SwUpdate

1. To check the activation status of a service worker use the activatedUpdate method instead of activated
2. Use versionUpdates and filter only the VersionReadyEvent events instead of available

AbstractControl

1. FormControlStatus is the union of all possible status strings for form controls
2. The type of AbstractControl.status is narrowed to FormControlStatus
3. The type of AbstractControl.statusChanges is narrowed to Observable<FormControlStatus>

Testing

1. SpyLocation no longer emits the popstate event when location.go is called
2. simulateHashChange now triggers both haschange and popstate

Hence, tests that rely on location.go need to use simulateHashChange to capture popstate.