Ionic v5/Angular 8: HttpClient.get().subscribe() returns TypeError: Cannot read property 'handle' of undefined

Question

HttpClient.get('...').subscribe((data:any) => { console.log(data) })) cause error and I am not able to find where the problem is. Please, do you have any idea what is going wrong? I am Angular beginner.

I get propably valid Observe object to the this.httpObserve subscribe on observe object cause this error.

ERROR TypeError: Cannot read property 'handle' of undefined (core.js:9110)
    at MergeMapSubscriber.project (http.js:1246)
    at MergeMapSubscriber._tryNext (mergeMap.js:46)
    at MergeMapSubscriber._next (mergeMap.js:36)
    at MergeMapSubscriber.next (Subscriber.js:49)
    at Observable._subscribe (subscribeToArray.js:3)
    at Observable._trySubscribe (Observable.js:42)
    at Observable.subscribe (Observable.js:28)
    at MergeMapOperator.call (mergeMap.js:21)
    at Observable.subscribe (Observable.js:23)
    at FilterOperator.call (filter.js:13)

---

----------- apicall.service.ts ----------------
import { Injectable } from '@angular/core';
import { HttpClient, HttpHandler, HttpClientModule } from '@angular/common/http';
import { Observable } from "rxjs";


@Injectable({
  providedIn: 'root'
})
export class ApicallService {
  httpObserve;
  httpHandler : HttpHandler;

  constructor() { }

  http = new HttpClient(this.httpHandler);

  public getData(val) : any {
    // test url
    this.httpObserve = this.http.get('https://www.seznam.cz');
    return this.httpObserve;
  }
}

---

----------- myapi.component.ts -------------------
import { Component, OnInit } from '@angular/core';
import { ApicallService } from '../apicall.service';
import { Observable } from "rxjs";

@Component({
  selector: 'app-myapi',
  templateUrl: './myapi.component.html',
  styleUrls: ['./myapi.component.scss'],
})

export class MyapiComponent implements OnInit {
  result : any;
  httpObserve;

  constructor() {}

  apicall = new ApicallService();

  ngOnInit(){}

  get(val): void {
    this.httpObserve = this.apicall.getData(val);
    this.httpObserve.subscribe((data:any) => { console.log(data) });
  }
}

---

page.ts

myapi = new MyapiComponent();
this.res = this.myapi.get(val);

Answer 1

you initiate without any value inside httpHandler.

http = new HttpClient(this.httpHandler); // <-- his.httpHandler is null

If there is no need for httpHandler,

constructor(private http: HttpClient) { }

// remove httpHandler : HttpHandler;
// remove  http = new HttpClient(this.httpHandler);