Rxjs observables will throw an error if an error occurs and is later caught and returned

Hey there, I'm encountering an issue with the following error message: "you provided an invalid object where a stream was expected. You can provide an Observable, Promise, Array, or Iterable" when trying to make an HTTP request from my effects.

deleteAccount(accountId: string): Observable<any> {
    return this.http.delete(FUNDING_ACCOUNT_DELETE_URL
      .replace(ACCOUNT_ID, accountId)).pipe(
        timeout(2000),
        catchError(err => { 
          return err; })
      );
  }

@Effect()
  paymentOptionRemove = this.actions
    .ofType(ActionTypes.PAYMENT_OPTION_REMOVE).pipe(
      switchMap((action: PaymentOptionRemoveAction) =>
        this.service.deleteAccount(action.payload).pipe(
          map(
            _ => new PaymentOptionRemovedAction()),
          // tslint:disable-next-line:arrow-return-shorthand
          catchError(err => {
            if (err) {
              console.log(err);
            }
            return of(new PaymentOptionRemoveErrorAction());
          })
        ))
    );

Answer №1

When working with the deleteAccount function, it is important to return an Observable. If you find yourself in the catchError block attempting to return the err, keep in mind that this is not observable.

Instead, consider using throwError from the rxjs library:

throwError is a handy function provided by rxjs which generates an Observable specifically for emitting errors to the subscriber. It is tailor-made for scenarios like the one you are facing.

import { throwError } from 'rxjs';

Implement it within the delete function as shown below:

return throwError(err);  

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

How can I trim a value using one-way data binding in Angular?

Is there a way to trim values in Angular using one-way data binding? Can this be done directly in the component.html file rather than in typescript? I tried the following but it didn't work: <P>{{country.trim()}}</P> Thanks ...

Tips for invoking a service from another in angular version 6

The following code snippet showcases Service 1, specifically the uploadAttachment method which executes an http post call. This method is invoked from Service 2. However, in Service 2, the instance of Service 1 is consistently undefined, resulting in a fai ...

Stop the current HTTP request and initiate a new one asynchronously

My custom component showcases a detailed view of a selected building along with a list of its units (apartments). Below is the HTML code for this component: <div *ngIf="$building | async as building"> ... <div *ngIf="$buildingUnit ...

Tips for showing JSON information in Nativescript

How can I display all values in a page using the provided JSON data? res { "StatusCode": 0, "StatusMessage": "OK", "StatusDescription": [ { "sensors": [ { "serial": "sensor1", "id": "1" }, ...

Utilize Angular 4 to dynamically load templates within a single component

My task is to create a component with multiple HTML templates, each containing at least 20 controls. Depending on certain conditions, a specific template should be loaded. Note: I have opted for 3 different templates because the controls vary based on the ...

Ways to access a nested route in Angular 4

My routing configuration is set up as depicted below: export const Approute: Routes = [ { path: '', component: DashboardComponent }, { path: 'add-course', component: AddCourseComponent }, { path: 'bui ...

Uncovering a commitment to reveal the valuable information within

Whenever my Spring Boot back-end responds to front-end requests, it structures the data like this: { "timestamp":[2022,6,16], "status":"OK", "data": { "products": [{"product ...

Show JSON information in an angular-data-table

I am trying to showcase the following JSON dataset within an angular-data-table {"_links":{"self":[{"href":"http://uni/api/v1/cycle1"},{"href":"http://uni/api/v1/cycle2"},{"href":"http://uni/api/v1/cycle3"}]}} This is what I have written so far in my cod ...

Showing JSON object in an Angular 2 template展示JSON对象在模

When I execute the following code: stanservice.categoryDetail(this.params.get('id')) .then((data) => { this.category = JSON.stringify(data.res.rows[0]); console.log(JSON.stringify(data.res.rows[0])); }) .catch((error) => { ...

Retrieve the attribute from the element that is in the active state

I'm facing a challenge in determining the active status of an element attribute. I attempted the following approach, but it incorrectly returned false even though the element had the attribute in an active state - (.c-banner.active is present) During ...

Issue with Angular detection on the webpage: Protractor and headless chrome unable to locate Angular

Running end-to-end tests on my Angular2 app using Chrome works perfectly fine. However, when attempting to use headless Chrome with additional chromeOptions, it fails to locate the Angular app. I have tried setting directConnect to true and starting the se ...

How to add unique elements to an array in Angular without any duplicates

I need help with pushing elements into an array and decrementing the count of it without duplicates in angular. Any assistance would be greatly appreciated ...

AWS Lambda serverless deployment of Angular Universal is failing to detect javascript files in the dist/browser directory

After following the steps in this tutorial for deploying to a lambda function, I encountered some issues. When testing it using serverless offline, I kept getting 404 errors for each compiled JS file. However, once I deployed it, the errors changed to 403. ...

How to control the audio currentTime using Angular 2 component

Here is the HTML code snippet that creates an HTML5 audio element: <audio id ="audio2" controls="controls" autoplay="false" (canplay)="CanPlay($event)"> <source src="http://localhost:51657/Audio/1" type="audio/mp3"> </audio> In the ...

Update the component following an HTTP post request

I have an addProjectModal component that allows users to add new projects. save(data:Project) { data.customer_id = this.customerID; data.supervisor_id = 450; this._projectService.addProject(data) .subscribe(res => console.log(res)); //initiat ...

What is the reason behind the checkbox event status returning the string "on" rather than true/false?

I have implemented a custom checkbox as a child component within a parent component. I properly pass the ngModel, name, etc., and attempt to update the model with a boolean status (true/false) based on the checkbox status using an EventEmitter. However, t ...

Distilling the Essence of "Deity" in Handling Runtime Errors

Working with a client who has a unique "God" component for creating form fields can be quite challenging. The complexity arises from the fact that we are using material design for non-mobile platforms and Ionic for mobile platforms. This special component ...

Angular4's integration with AngularFireAuth for Google authentication is causing users to be redirected back to the source page before they can successfully

Previously, this feature was functioning perfectly. However, the current issue is that the browser is redirecting to a long URL and then quickly returning to the original source URL. This prevents users from logging into their Google accounts. authentica ...

"encountered net::ERR_NAME_NOT_RESOLVED error when trying to upload image to s3 storage

I am currently developing an application using Angular. I have been attempting to upload a picture to my S3 bucket, but each time I try, I encounter this error in the console. https://i.stack.imgur.com/qn3AD.png Below is the code snippet from my upload.s ...

Obtaining Data from an Array with Reactive Forms in Angular 4

Just starting out with Angular 4 and trying to figure out how to populate input fields with information based on the selection made in a dropdown. <select formControlName="selectCar" class="form-field"> <option value="">Choose a car&l ...