I have to display data in a modal. For this I am using an Angular2 service and consuming web service to display from a backend DB. In

Question

Hi I have to display data in a modal. For this I am using an Angular2 service and consuming web service to display from a backend DB. In doing so I am receiving the below 2 errors.

1) Failed to load resource: the server responded with a status of 500 () 2) ERROR TypeError: You provided an invalid object where a stream was expected. You can provide an Observable, Promise, Array or Iterable

Below is the Angular2 service followed by the ANgular2 method for the same. Please help me resolve this. All these output list / array of data.

Angular2 Service

productsService

     public GetProductInfo(prodId, depId, custId): Observable<any> {
          let myParams = new URLSearchParams();
          myParams.append('prodId', prodId);
          myParams.append('depId', depId);
          myParams.append('custId', custId);
          let options = new RequestOptions({ params: myParams });
          return this.commonService.get(this.GetProductEndpoint, options);
}

Angular2 Method in component.ts

private loadGetProductInfo(prodId: any, depId: any, custId: any) {
  this.productsService.GetProductInfo(prodId, depId, custId)
    .subscribe((result) => {
      if (result != null) {
        this.GetProductInfo = result;
        this.temp = [...result];
        this.productsInfo = result;
      }
    });
}

Answer 1

Your backend is throwing an error and the resulting error isn't handled appropriately which is causing the second error.

GetProductInfo expects an observable to be returned from your get request, but your get request fails, doesn't handle the exception (error), and doesn't return an observable which throws the error.