TypeError: this.networkService.getRequest(...).pipe is not a function in ionic Angular

Question

Clicking on second tab in a tab bar shows this error:

core.js:6241 ERROR Error: Uncaught (in promise): TypeError: this.networkService.getRequest(...).pipe is not a function
TypeError: this.networkService.getRequest(...).pipe is not a function
at PaymentService.getPaymentList (payment.service.ts:359)
at PaymentComponent.loadDataPaymentState (payment.component.ts:188)
at PaymentComponent.ngAfterViewInit (payment.component.ts:130)

Two pages in these tabs are using PaymentComponent. Everything works in the tab which is first open. Clicking on second tab causes error.

The code on which error occurs is :

getpaymentList() {
let list = this.buildListURL();
return this.networkService.getRequest(list).pipe(
  tap(
    (data) => {
      console.log(data);
   
      this.lastbill= data["bill"];
    },
    (error) => {
      console.log(" error");
      console.log(error);
    }
  )
);

}

The code of getRequest:

getRequest(path, customHeader?) {
let options = this.createOptions();
if (customHeader) {
  options.headers = this.jsonConcat(options.headers, customHeader);
}

if (!this.isOnline) {
  this.errorOccurred(null);
}
let cachedData = this.cacheService.getCachedNode(path);
if (cachedData) {
  return cachedData;
} else {
  return this.http
    .get(
      path,
      options
    )
    .pipe(
      map(
        (data) => {
          console.log("data");
          return data;
        },
        (error) => {
          console.log("error");
          console.log(error);
          this.errorOccurred(error);
        }
      )
    );
}

}

I am not able to figure out what is the issue. If anyone have an idea about it then please let me know. Thanks

Answer 1

Your code is giving error because calling method expects an observable when first time you call getRequest method there is no data in a cache and data in else clause get called but when this function get called next time then there is a data in a cache and if (cachedData) clause get called but

if (cachedData) {
   return cachedData;
}  

is not returning observable.

If you will do small changes in it then it will also work with cache code. You have to do following things:

1. First:

   import { of } from "rxjs";
   

2. make few changes in getRequest method, instead of

   if (cachedData) {
      return cachedData;
   }   
   

write

   if (cachedData) {
       return of(cachedData);
   }