Troubleshooting the issue with the HTTPClient get method error resolution

Currently, I am attempting to capture errors in the HTTP get request within my service file.

Below is the code snippet:

import { Injectable } from '@angular/core';
import { PortfolioEpicModel, PortfolioUpdateStatus } from '../models/portfolio-epic.model';
import { HttpClient, HttpErrorResponse, HttpParams} from '@angular/common/http'
import { config, Observable } from 'rxjs';
import { retry, catchError } from 'rxjs/operators';

refreshPortfolioEpicsList(id:number):Observable<PortfolioEpicModel[]>{   
  this.baseUrl=this.conf.getSettings("apiUrl");
  return this.http.get<PortfolioEpicModel[]>(this.baseUrl+ "/api/pepics/"+ id.toString())
    .pipe(catchError(this.errorHandler));
}

errorHandler(error:HttpErrorResponse){
  console.info(error.message);
}

However, when trying to use the catchError method, the following error is displayed:

Argument of type '(error: HttpErrorResponse) => void' is not assignable to parameter of type '(err: any, caught: Observable<PortfolioEpicModel[]>) => ObservableInput'. Type 'void' is not assignable to type 'ObservableInput'.ts(2345)

I am unsure how to resolve this issue.

My current environment is Angular 11.

Answer №2

The reason for the error you're encountering is because the errorHandler function that you are providing to the RxJS catchError operator needs to either return an Observable or re-throw the error, as demonstrated by @Yong Shun in their solution

For more information on how to use the catchError operator, you can refer to the official documentation available here: https://rxjs.dev/api/operators/catchError

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Update the status of the reactive form control to invalid

I'm attempting to mark a form control as invalid, however, the following code snippet is not producing the desired result this.currencyForm.controls['currencyMaxSell'].setErrors({smallerThan: true}) ...

Create a custom class that functions similarly to a dictionary

Is it not feasible to achieve this? interface IMap { [key: string]: string; } class Map implements IMap { public foo = "baz"; } But instead of success, I encounter the error: TS2420:Class 'Map' does not correctly implement 'IMap& ...

Retrieving information from Next.js and Typescript with the help of getStaticProps

I've been working on a personal project with Next.js and TypeScript. I'm attempting to fetch data from an API and then map the items, but I'm running into issues. When I use console.log, it returns undefined. The file is located in the pages ...

Unable to resolve all dependencies for UserService: (Http, ?)

After transitioning to the latest Angular2 version 2.0.0-beta.17, my project started experiencing issues. The structure of my UserService is as follows: import { Injectable} from '@angular/core'; import { Http } from '@angular/http'; ...

TypeScript's conditional property failing to recognize incorrect functional argument

The concept of a conditional type should encompass smart properties, and I sought assistance from @jcalz in the previous iteration of this query. Even though that issue was resolved, I am still unable to achieve the level of typing strictness I desire. The ...

No data is generated when choosing from the dropdown menu in mat-select

I have a select function where all options are selected, but the selected sections are not shown. When I remove the all select function, everything works fine. Can you help me find the error? Check out my work on Stackblitz Here is my code: Select <m ...

Changes are made to the Angular template-driven form after certain controls have been added or removed

Within a fieldset, there exists a flexible number of 'select' drop down lists, accompanied by a button after each one (except the last one) to remove it. Upon selecting an option from the last select control, a new select control is dynamically a ...

What is preventing me from utilizing the import syntax to bring in a coffeescript file within typescript?

So here's the deal: I've got a typescript file where I'm importing various other typescript files like this: import ThingAMajig from '../../../libs/stuffs/ThingAMajig'; // a typescript file However, when it comes to importing my ...

Tips for maintaining the original data type while passing arguments to subsequent functions?

Is there a way to preserve generic type information when using typeof with functions or classes? For instance, in the code snippet below, variables exampleNumber and exampleString are of type Example<unknown>. How can I make them have types Example& ...

Using Default Parameters in the ngrx getWithQuery() Function

Curiosity strikes me on how to send the default data already present in getWithQuery(), just like this: @Injectable({providedIn: 'root'}) export class CompaniesDataService extends DefaultDataService<Company> { private readonly _URL: str ...

Angularfire2 with Firebase - receiving notifications for added child in queried list

Is it possible to utilize the "child_added" event with queried lists? For example: this.curUserPosts = this.af.database.list('/posts', { query: { orderByChild: 'user/id', equalTo: id } }).$ref.on("child_added", (c ...

Enhancing user interaction in Angular by implementing a mouseover and mouseleave event listener on an element

I've been working on implementing a hover-over zoom functionality for my images. I created a custom function and tried to integrate it into the ngOnInit() {} method, but unfortunately, the functionality is not working as expected. @Component({ se ...

Break down Angular modules into smaller parts with the help of webpack

As I work on breaking down a huge Angular project with numerous components, I'm faced with the challenge of dealing with this large module that ideally shouldn't be there in the first place. Unfortunately, due to the current stage of the project, ...

Assign unique element IDs dynamically within an ngFor loop

Can anyone help me with assigning dynamic IDs to div elements inside an *ngFor loop? I want the divs to be named 'wave1, wave2, wave3' and so on. <li *ngFor="let episode of episodes; let i = index"> <div id="wave{{i}}& ...

Setting up Webpack for my typescript React project using Webpack Version 4.39.2

I have been given the task of fixing the Webpack build in a project that I am currently working on. Despite not being an expert in Webpack, I am facing difficulties trying to make it work. The project has an unconventional react frontend with typescript. I ...

Struggling to chart out the post response in Angular 7

I am facing an issue while setting up a service on Angular version 7. The problem arises with the res.json() method, throwing an error stating Property 'json' does not exist on type 'Object'. Below is my service's code: import {In ...

Issue with generating source map files using Webpack 4 and ts-loader

What mistake am I making here? When I execute webpack -d --config webpack.config.js, the map file is not generated along with bundle files. Here is my webpack.config.js: const path = require('path'); module.exports = { mode: "development" ...

Show the value in Angular in a dynamic way

My template needs to display the text 'Passed' only if item.name === 'michael' is not true. The component receives data in an array called courses[] from its parent. There are two interfaces, Courses and Teachers, where each course ID h ...

Function 'await' fails to execute

Within this function, I am iterating through an array of strings, each representing a user's UID. The goal is to access each user's profile, retrieve the most recent reputation (similar to SO), and then add a map of the UID and reputation to a ne ...

Initiating a GET request to execute an SQL query with specified parameters

Let me provide some background information. I am currently using Angular for the frontend and Express for the backend, while also learning how to effectively utilize both technologies. In my application, there is a parent component that generates a group ...