The "void" type cannot be assigned to the type "ObservableInput<{}>"

Question

The "void" type cannot be assigned to the type "ObservableInput<{}>"

I recently encountered this issue after updating to TS 2.2.2, and I suspect that is the root cause... While the code still functions properly, I am now seeing this error. I attempted various solutions such as returning an empty observable, catching the re-thrown exception, and returning an object, but nothing seemed to resolve it. Why is this problem arising now? Shouldn't it recognize I am re-throwing the exception and not expect a return? Could I be misinterpreting the error message?

Here is the detailed description of the error:

https://i.sstatic.net/ePmFC.jpg

Below is the complete code snippet:

return request
    .map((res: Response) => res.json())
    .catch((error: any) => {
        // todo: log?

        if (error.status == 500) {
            this.alertService.showError(error.statusText);
        } else if (error.status == 588) {
            this.alertService.showAlert(error.statusText);
        }

        Observable.throw(error.statusText);
    });

I attempted to return the Observable, however, my wrapper method requires a return type T, which corresponds to the deserialized request's return value from map(...). If I do include the throw, I receive the following error message:

[ts] Type 'Observable' is not assignable to type 'T'

The technologies I am using are:

Angular4

Typescript 2.2.2

typescript angular

Answer 1

Answer №1

Make sure to send back the Observable

 return request
    .map((res: Response) => res.json())
    .catch((error: any) => {
        // remember to log?

        if (error.status == 500) {
            this.alertService.showError(error.statusText);
        } else if (error.status == 588) {
            this.alertService.showAlert(error.statusText);
        }

        return Observable.throw(error.statusText);
    });

Answer 2

Make sure to send back the Observable

 return request
    .map((res: Response) => res.json())
    .catch((error: any) => {
        // remember to log?

        if (error.status == 500) {
            this.alertService.showError(error.statusText);
        } else if (error.status == 588) {
            this.alertService.showAlert(error.statusText);
        }

        return Observable.throw(error.statusText);
    });

Answer 3

Answer №2

At times, when catch is called without using an arrow function like in the example below

getUserList() {
    return this.http.get(this.constURL + '/api/url/here', this.headerOptions)
    .catch(this.handleError);
}

handleError(error: Response) {
    if (error.status == 500) {      
      this.router.navigate(['/login']);
    } else {
      return Observable.throw(error);
    }
}

an error occurs:

ERROR TypeError: Cannot read property 'navigate' of undefined because the this object is inaccessible in the handleError function..if you console this.router then you will get undefined.. so this object is not working and router methods are not accessible.

Thus, it is necessary to use an arrow function as shown below:

getUserList() {
    return this.http.get(this.constURL + '/api/url/here', this.headerOptions)
    .catch(error => { 
      return this.handleError(error);
    });
}

handleError(error: Response) {
    if (error.status == 500) {      
      this.router.navigate(['/login']);
    } else {
      return Observable.throw(error);
    }
}

Furthermore, if a return statement is not specified for the handleError function, another error will be thrown:

Argument of type '(error: any) => void' is not assignable to parameter of type.

Therefore, it is crucial to include a return statement for the handleError function.

For more detailed information, refer here. The author has explained the code comprehensively with solutions to possible errors, which worked effectively for me.

Answer 4

At times, when catch is called without using an arrow function like in the example below

getUserList() {
    return this.http.get(this.constURL + '/api/url/here', this.headerOptions)
    .catch(this.handleError);
}

handleError(error: Response) {
    if (error.status == 500) {      
      this.router.navigate(['/login']);
    } else {
      return Observable.throw(error);
    }
}

an error occurs:

ERROR TypeError: Cannot read property 'navigate' of undefined because the this object is inaccessible in the handleError function..if you console this.router then you will get undefined.. so this object is not working and router methods are not accessible.

Thus, it is necessary to use an arrow function as shown below:

getUserList() {
    return this.http.get(this.constURL + '/api/url/here', this.headerOptions)
    .catch(error => { 
      return this.handleError(error);
    });
}

handleError(error: Response) {
    if (error.status == 500) {      
      this.router.navigate(['/login']);
    } else {
      return Observable.throw(error);
    }
}

Furthermore, if a return statement is not specified for the handleError function, another error will be thrown:

Argument of type '(error: any) => void' is not assignable to parameter of type.

Therefore, it is crucial to include a return statement for the handleError function.

For more detailed information, refer here. The author has explained the code comprehensively with solutions to possible errors, which worked effectively for me.

Answer 5

Answer №3

This solution addresses the usage of Angular 6 along with RXJS 6. When implementing your request function, it should resemble the following code snippet. Please note that catch has been updated to catchError, and Observable.throw is now throwError. Additionally, in RXJS 6, we utilize pipe to chain a sequence of functions together instead of dot chaining as seen previously.

//Within your service

getData(url: string): Observable<any> {
    let options = this.getHTTPOptions();
    return this.http.get<any>(url, options).pipe(
          catchError( (err: any, caught: Observable<any>) => { return throwError(this.generalErrorHandler(err, caught)) } ) );
}

An error handler can then be implemented. It is crucial to include the keyword return within both the catchError function above and the returned error in the handler function. With the arrow notation ( => ), you have access to the context of the calling function in the error handler, enabling operations such as

this.router.navigate(['someroute']);

(assuming the router is imported into your service).

//Within your service

  generalErrorHandler(error: any, caught: Observable<any>): Observable<any> {
    console.log('error caught: ', error);
    if( error.error.status == "INVALID_TOKEN" || error.error.status == "MAX_TOKEN_ISSUE_REACHED"){
      console.log('token has expired');
      this.logout();
      return error;
    }
    return error;
  }

Key imports required for this setup:

//Imports for the service

import { HttpClient, HttpHeaders, HttpErrorResponse } from '@angular/common/http';
import { Http, Response } from '@angular/http';
import { catchError, map } from 'rxjs/operators';
import { Observable, throwError, of} from 'rxjs';

Lastly, to retrieve data by subscribing to the request:

//Within your component, remember to import your service

let response$ = this.someService.getData('url here');
response$.subscribe( 
    data => { console.log('perform operations on data here', data); },
    err => { console.log("unable to fetch data, consider displaying an error message to the user"); },
    () => { console.log('function executed upon completion'); }
);

Answer 6

This solution addresses the usage of Angular 6 along with RXJS 6. When implementing your request function, it should resemble the following code snippet. Please note that catch has been updated to catchError, and Observable.throw is now throwError. Additionally, in RXJS 6, we utilize pipe to chain a sequence of functions together instead of dot chaining as seen previously.

//Within your service

getData(url: string): Observable<any> {
    let options = this.getHTTPOptions();
    return this.http.get<any>(url, options).pipe(
          catchError( (err: any, caught: Observable<any>) => { return throwError(this.generalErrorHandler(err, caught)) } ) );
}

An error handler can then be implemented. It is crucial to include the keyword return within both the catchError function above and the returned error in the handler function. With the arrow notation ( => ), you have access to the context of the calling function in the error handler, enabling operations such as

this.router.navigate(['someroute']);

(assuming the router is imported into your service).

//Within your service

  generalErrorHandler(error: any, caught: Observable<any>): Observable<any> {
    console.log('error caught: ', error);
    if( error.error.status == "INVALID_TOKEN" || error.error.status == "MAX_TOKEN_ISSUE_REACHED"){
      console.log('token has expired');
      this.logout();
      return error;
    }
    return error;
  }

Key imports required for this setup:

//Imports for the service

import { HttpClient, HttpHeaders, HttpErrorResponse } from '@angular/common/http';
import { Http, Response } from '@angular/http';
import { catchError, map } from 'rxjs/operators';
import { Observable, throwError, of} from 'rxjs';

Lastly, to retrieve data by subscribing to the request:

//Within your component, remember to import your service

let response$ = this.someService.getData('url here');
response$.subscribe( 
    data => { console.log('perform operations on data here', data); },
    err => { console.log("unable to fetch data, consider displaying an error message to the user"); },
    () => { console.log('function executed upon completion'); }
);

Answer 7

Answer №4

 return Observable.throw(error);

The Observable. throw method is no longer recommended, instead use the throwError operator within the interceptor.

intercept(request: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {
   return next.handle(request).pipe(
    catchError(err => {
      if (err.status === 401) {
       // remove Bearer token and redirect to login page
        this.router.navigate(['/auth/login']);
      }
      return throwError( err );
    }));
}

Answer 8

 return Observable.throw(error);

The Observable. throw method is no longer recommended, instead use the throwError operator within the interceptor.

intercept(request: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {
   return next.handle(request).pipe(
    catchError(err => {
      if (err.status === 401) {
       // remove Bearer token and redirect to login page
        this.router.navigate(['/auth/login']);
      }
      return throwError( err );
    }));
}

Answer 9

Answer №5

Currently, using Angular 14, I was able to resolve the error by utilizing Error(err.error.message);.

For instance:

 handleAppError(err: any): Observable<any> 
{return new Error(err.error.message);}

Answer 10

Currently, using Angular 14, I was able to resolve the error by utilizing Error(err.error.message);.

For instance:

 handleAppError(err: any): Observable<any> 
{return new Error(err.error.message);}

The "void" type cannot be assigned to the type "ObservableInput<{}>"

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Is there a way to transform time into a percentage with the help of the moment

Guide to successfully passing a function as a prop to a child component and invoking it within Vue

Underscore.js is failing to accurately filter out duplicates with _uniq

What is the best approach to validating GraphQL query variables while utilizing Mock Service Worker?

Unable to access property 'create' which is undefined

Guide to customizing the appearance of a component's host element on-the-fly

Display dates in Angular with specific Timezone settings

The concept of a singleton design pattern is like a hidden treasure waiting to be

The updated values in an Angular application may not always be accurately represented by interpolated values

Issues have been reported regarding the paramMap item consistently returning null when working with Angular 8 routing

Angular unable to send object to HTML page

What function does the ng-template serve when encapsulated within an ng-select component?

What is the best way to transition this endpoint from JavaScript to TypeScript?

The most efficient method for distributing code between TypeScript, nodejs, and JavaScript

Using React and TypeScript to Consume Context with Higher Order Components (HOC)

How can I set ion-option to be selected by tapping instead of having to click OK?

Choose the Angular 2 option

Guide on expanding the capabilities of IterableIterator in TypeScript

Can someone explain why the Next 13 API route is showing up as empty?

Is it possible that React.createElement does not accept objects as valid react children?