Property 'subscribe' does not exist on type 'OperatorFunction<Response, {}>'

Question

Im aware that this has been asked multiple times before, however, I could not figure out how to change my own code using following posts.

Property 'subscribe' does not exist on type 'OperatorFunction<Response, Recipe[]>'

Property 'subscribe' does not exist on type 'OperatorFunction<Product[], ParamMap>'

Property 'subscribe' does not exist on type 'OperatorFunction<unknown, any>'

---

rest-api.service.ts

specificObjectRequest(ids: string[]): Observable<any> {
  var idString = ids.join(); 
  const url = `${ApiServerUrl}/media_objects?ID=${idString}`;
  console.log("requesting from url: " + url);
  this.http.get(url, {}, {})
    .then(res => this.extractData = res.data)
    .catch(this.handleError);
  return;
}

tagRequest(topic: string){
    var url = `${ApiServerUrl}/tags?topic=${topic}`;
    url = encodeURI(url);
    console.log("requesting from url: " + url);
    this.http.get(url, {}, {})
      .then(res => this.extractData = res.data)
      .catch(this.handleError);
    return map(this.extractData);
  }

I created this request using the official documentation https://ionicframework.com/docs/native/http and this tutorial

filter.page.ts

async requestMapTags(topic: string){
    await this.api.tagRequest(topic).subscribe(res => {  //Property 'subscribe' does not exist on type 'OperatorFunction<Response, {}>'
      console.log(res);
      this.tagsRequestAnswer = res; 
    }, err => {
      console.log(err);
    });
}

Error Message:

[ng] ERROR in src/app/filter/filter.page.ts(89,35): error TS2339: Property 'subscribe' does not exist on type 'OperatorFunction<Response, {}>'.

From what I have read, it's a conflict between Promises and rxjs.

Question: What do I need to change to get this working? Is there a way to add the required 'pipe' function in my code in order for it to work?

Answer 1

Your tagRequest() need to have a return value as an Observable not OperatorFunction<Response, {}> ;

So try something like this:

import { from } from 'rxjs';

tagRequest(topic: string){
    var url = `${ApiServerUrl}/tags?topic=${topic}`;
    url = encodeURI(url);
    console.log("requesting from url: " + url);
    return from(this.http.get(url, {}, {}));
  }

Answer 2

using promises here seems unnecessary, you can do it without more easily

import { of } from 'rxjs';

tagRequest(topic: string){
    var url = `${ApiServerUrl}/tags?topic=${topic}`;
    url = encodeURI(url);
    return of(this.http.get(url, {}, {})).pipe(map(res => res.data));
  }

requestMapTags(topic: string){
    this.api.tagRequest(topic).subscribe(res => { 
      console.log(res);
      this.tagsRequestAnswer = res; 
    }, err => {
      console.log(err);
    });
}