Common Breaking Changes during and after upgradation of Angular Application to higher or latest version of Angular

There are some common breaking errors and warnings whenever we are upgrading an Angular application from older Angular version to higher or latest version of Angular (e.g. Angular 5 to Angular 12, Angular 8 to Angular 12 or higher), below we have given list of common common errors and warnings and also given solution to fix those errors.

1. '@angular/http' Module Error:

This is common error whenever you are upgrading Angular version, so you need to check whether your application is using '@angular/http' module, if it is then it should be replaced with '@angular/common/http' module as shown below, because after Angular 5, they replaced it with '@angular/common/http' module to make http API calls:

Below shown is the older code:

1. import { Http } from '@angular/http';
2. import { Injectable } from '@angular/core';
3. import { User } from './user';
4. 
   
5. @Injectable()
6. export class UserService {
7.     constructor(private http: Http) { }
8.  
9.     getUsers():Observable<User[]>{
10.         return this.http.get('http://myapi:50422/api/users/getUsers').map((response: Response) => response.json());
11.     }
12. }

You need to replace the above older code with below new code:

1. import { HttpClient } from '@angular/common/http';
2. import { Injectable } from '@angular/core';
3. import { User } from './user';
4.  
5. @Injectable()
6. export class UserService {
7.     constructor(private http: HttpClient) { }
8.  
9.     getUsers(){
10.         return this.http.get<User[]>('http://myapi:50422/api/users/getUsers');
11.     }
12. }

2. Angular Material Issues:

Once you upgraded to latest or higher version of Angular from your older version, you also need to update Angular Material, to update it, run the below command:

ng update @angular/material

3. Repository is not clean. Please commit or stash any changes before updating Error:

Whenever we are upgrading from older version of Angular to higher version of Angular, it checks the Repository and throws this error if there is any issue, to ignore the Repository check, we can add the --allow-dirty in the ng update command as shown below:

ng update @angular/core@10 @angular/cli@10 --allow-dirty

4. Incompatible Peer Dependency Found issue:

Whenever we are upgrading from one version to another higher version of Angular, sometimes the upgradation gives error as "Incompatible Peer Dependency Found", that time we need to run the ng update command with --force, so that it ignores checking such errors during upgradation.

ng update @angular/core@10 @angular/cli@10 --allow-dirty --force

5. Node.js Version:

Make sure you have upgraded Node.js installed on your machine to latest version as well, download & install latest Node.js from https://nodejs.org/en/download/

You can check the Node.js version installed on the machine by using below command:

node -v

6. Typescript Version:

Make sure you are using correct Typescript version that is required for Angular application to run on. 

You can upgrade to latest typescript version by using below command:

npm install -g typescript

Following command helps you to upgrade to any specific version of Typescript such as e.g.  4.2, 4.0, 3.8, 3.4, 3.1, 2.4.2 etc.):

npm install -g typescript@4.0

You can check the Typescript version from below command:

tsc -v

For any other issue or assistance during upgradation, please refer https://update.angular.io/