Upgrading from Angular 4 to Angular 5 may result in the following error message: "Error TS2322: The type 'Promise<void | LineSideInspection>' is not compatible with the type 'Promise<LineSideInspection>'"

Question

Upgrading from Angular 4 to Angular 5 may result in the following error message: "Error TS2322: The type 'Promise<void | LineSideInspection>' is not compatible with the type 'Promise<LineSideInspection>'"

I recently updated my Angular project from version 4 to 5.0 and started encountering an error. The code for the entire project (in Angular 4) can be found on github at https://github.com/SudhirSahoo/IQS

ERROR in src/app/lineside-inspection/lineside-inspection.service.ts(44,9): error TS2322: Type 'Promise<void | LineSideInspection>' is not assigna
ble to type 'Promise<LineSideInspection>'.
  Type 'void | LineSideInspection' is not assignable to type 'LineSideInspection'.
    Type 'void' is not assignable to type 'LineSideInspection'.
src/app/lineside-inspection/lineside-inspection.service.ts(50,64): error TS2339: Property 'rankAcount' does not exist on type 'Response'.
src/app/lineside-inspection/lineside-inspection.service.ts(51,64): error TS2339: Property 'rankBcount' does not exist on type 'Response'.
src/app/lineside-inspection/lineside-inspec...

<p>Code:</p>

<pre><code>update(inspection: LineSideInspection): Promise<LineSideInspection> {
        const url = '/api/inspection/updatecount/';
        let rankName = inspection.rankName;
        return this.http
            .post(url, JSON.stringify(inspection), {headers: this.headers})
            .toPromise()
            .then(response => {
                let data = response.json();
                if (rankName='A') inspection.rankAcount = data.rankAcount;
                if (rankName='B') inspection.rankBcount = data.rankBcount;
                if (rankName='C') inspection.rankCcount = data.rankCcount;
                return response.json() as LineSideInspection;
            })
            .catch(error => {
                alert("error");
            });
    }

If I change the return type to any, then I am not getting that error while ng build.

update(inspection: LineSideInspection): any {
        const url = '/api/inspection/updatecount/';
        let rankName = inspection.rankName;
        return this.http

Do I really have to change the return type everywhere?

angular typescript

Answer 1

Answer №1

One reason for this issue is that your catch block returns void, giving you two possible solutions.

The first option is to eliminate the catch block from your update method and manage errors in a different part of your code.

update(inspection: LineSideInspection): Promise < LineSideInspection > {
  const url = '/api/inspection/updatecount/';
  let rankName = inspection.rankName;
  return this.http
    .post(url, JSON.stringify(inspection), {
      headers: this.headers
    })
    .toPromise()
    .then(response => {
      let data = response.json();
      if (rankName = 'A') inspection.rankAcount = data.rankAcount;
      if (rankName = 'B') inspection.rankBcount = data.rankBcount;
      if (rankName = 'C') inspection.rankCcount = data.rankCcount;
      return response.json() as LineSideInspection;
    })
    // .catch(error => {
    //  alert("error");
    // });
}

Another approach is to return an object matching LineSideInspection using the catch operator.

import { of
} from 'rxjs/observable/of';

update(inspection: LineSideInspection): Promise < LineSideInspection > {
  const url = '/api/inspection/updatecount/';
  let rankName = inspection.rankName;
  return this.http
    .post(url, JSON.stringify(inspection), {
      headers: this.headers
    })
    .toPromise()
    .then(response => {
      let data = response.json();
      if (rankName = 'A') inspection.rankAcount = data.rankAcount;
      if (rankName = 'B') inspection.rankBcount = data.rankBcount;
      if (rankName = 'C') inspection.rankCcount = data.rankCcount;
      return response.json() as LineSideInspection;
    })
    .catch(error => of({} as LineSideInspection))
}

Answer 2

One reason for this issue is that your catch block returns void, giving you two possible solutions.

The first option is to eliminate the catch block from your update method and manage errors in a different part of your code.

update(inspection: LineSideInspection): Promise < LineSideInspection > {
  const url = '/api/inspection/updatecount/';
  let rankName = inspection.rankName;
  return this.http
    .post(url, JSON.stringify(inspection), {
      headers: this.headers
    })
    .toPromise()
    .then(response => {
      let data = response.json();
      if (rankName = 'A') inspection.rankAcount = data.rankAcount;
      if (rankName = 'B') inspection.rankBcount = data.rankBcount;
      if (rankName = 'C') inspection.rankCcount = data.rankCcount;
      return response.json() as LineSideInspection;
    })
    // .catch(error => {
    //  alert("error");
    // });
}

Another approach is to return an object matching LineSideInspection using the catch operator.

import { of
} from 'rxjs/observable/of';

update(inspection: LineSideInspection): Promise < LineSideInspection > {
  const url = '/api/inspection/updatecount/';
  let rankName = inspection.rankName;
  return this.http
    .post(url, JSON.stringify(inspection), {
      headers: this.headers
    })
    .toPromise()
    .then(response => {
      let data = response.json();
      if (rankName = 'A') inspection.rankAcount = data.rankAcount;
      if (rankName = 'B') inspection.rankBcount = data.rankBcount;
      if (rankName = 'C') inspection.rankCcount = data.rankCcount;
      return response.json() as LineSideInspection;
    })
    .catch(error => of({} as LineSideInspection))
}

Upgrading from Angular 4 to Angular 5 may result in the following error message: "Error TS2322: The type 'Promise<void | LineSideInspection>' is not compatible with the type 'Promise<LineSideInspection>'"

Answer №1

Similar questions

Solving the problem of cookieParser implementation in NestJS

Is there a way to utilize an AXIOS GET response from one component in a different component?

Ng-Select does not support disabling elements in conjunction with Bootstrap 4

Displaying a portion of the chart's key in a Highcharts BarChart

Assistance with Angular: Utilizing a Spring Boot backend

Can you provide guidance on how to divide a series of dates and times into an array based

Trouble with implementing a custom attribute directive in Angular 4 and Ionic 3

Tips for sorting through and minimizing data based on the most recent date

Uploading Files with Django Rest Framework and Angular 2

Is it advisable to utilize the vendorChunk feature in Angular for production purposes?

Angular2: Adding a new array to all objects within an existing array

collaborating on data within closely related components in a table display

Retrieve a zip file using Angular RX and extract its contents

What could be causing IE11 to cut off my JavaScript file prematurely?

Errors in Visual Studio regarding typescript are often not found by tsc and eslint, causing frustration for developers

Different ways to update the AutoComplete Style attribute

Angular allows you to easily upload multiple files at once

Anticipate an asynchronous function causing an error in a Jest test scenario

The command '. .' is not valid for running npm install with firebaseUI

Tips on enabling typing support in VS Code and the tsc command for modules that do not use @types?