title: ERROR TypeError: Cannot read property 'handle' of undefined
body: <p>In my application i have created two components. Selector Component and Shifter Component. Selector components selects the list of items that needs to be updated. The selector component invokes a method in Shifter component that actually updates the item selected. The selector component calls a service which in turn invokes a url using http Get method to get the list of items to be updated. I am listing the items selected as hyperlinks. On clicking an item listed, a call to a method in shifter component is made.  This method calls a service which in turn invokes a http Patch method to update the item.</p>
  
  <p>In this process I am getting an error</p>
  
  <p>core.js:6014 ERROR TypeError: Cannot read property 'handle' of undefined</p>
  
  <p>Here is my selector component:</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { SelectorService } from '../selector.service';
  import { Item, SelectorResponse } from '../selector-response';
  import { ShifterRequest } from '../shifter-request';
  import { HttpClient, HttpHeaders } from '@angular/common/http';
  import {CanonicalShifterRequest } from '../cshifter';
  import { ShifterService } from '../shifter.service';
  import { ShifterComponent } from '../shifter/shifter.component';
  
  @component({
      selector: 'app-selector',
      template: 
          &lt;div *ngIf="sdata"&gt;
          &lt;h2&gt;Items&lt;/h2&gt;  
          &lt;ul&gt;
              &lt;li *ngFor="let tci of getTags()"&gt;
                  &lt;a href="javascript:void90);" (click)="callupdate(tci.slector, tci.service)"&gt;{{tci.service}] - {{tci.selector}}&lt;/a&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
          &lt;/div&gt;
  ,
  styles: []          
  })
  
  export class SelectorComponent implements OnInit {
      constructor(private _selectorService: SelectorService){}
      public svs:ShifterComponent;
      public sdata: SelectorResponse;
      public cShifterRequest: CanaonicalShifterRequest[] =[];
      public services:string[] = ["myservice1",....
      public httpH:HttpHandler;
      public httpC:HttpClient = new HttpClient(this.httpH);
  
      ngOnInit(){
          this._selectorService.getEntries().subscribe(data =&gt; this.sdata = data);
      }
  
      getTags(){
          //my method to get the items 
      }
      callUpdate(instanceSel:String, servicename: String){
          var shifterComponent:ShifterComponent(new ShifterService(this.httpc));
          if (shifterComponent instanceof ShifterComponent)
              shifterComponent.updateServiceCaller(instanceSel, servicename);
      }
  }
  </code></pre>
  
  <p>Here is my shifter component:</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { SelectorService } from '../selector.service';
  import { Item, SelectorResponse } from '../selector-response';
  import { ShifterRequest } from '../shifter-request';
  import { HttpClient  } from '@angular/common/http';
  import {CanonicalShifterRequest } from '../cshifter';
  import { ShifterService } from '../shifter.service';
  
  @Component({
      selector: 'app-shifter',
      template: &lt;h2&gt;update&lt;/h2&gt;,
      styles: []
  })
  
  export class ShifterComponent implements OnInit {
      constructor(private _shifterService: ShifterService ) {}
  
      public instanceSel:String:
      public servicename:String;
  
      public udata: any;
  
      updateServiceCaller(instanceSel:String, servicename:String){
          if(this._shifterService instanceof ShifterService)
              this._shifterService.updateService(instanceSel, servicename).subscribe(data =&gt; this.udata = data);
  }
  }       
  </code></pre>
  
  <p>Here is my shifter service</p>
  
  <pre><code>pimport { Observable } from 'rxjs';
  import { ShifterRequest } from './shifter-request';
  
  @Injectable({
  providedIn: 'root'
  })
  
  export class ShifterService{
  
  private servicename:String;
  private _url:String = "";
  shifterRequest: 
  
  headerDict = {... } //my headers
  
  headers = new HttpHeaders(this.headerDict)
  
  constructor(private http: HttpClient){}
  
  updateService(instanceSel: String, servicename: String) : Observable&lt;any&gt; {
  
  this._url="https://xyz/" + servicename;
  
  if(this.http instanceof HttpClient){
      return this.http.patch&lt;any&gt;(this._url, {..my request goes here.}, {headers: this.headers});
  }
  else{
      console.log("shifter service nul http");
      return null;
  }
  }
  }
  </code></pre>
  
  <p>i think the issue is due to the fact that i am not sure how to initialize the HttpClient in the SelectorComponent.</p>
  
  <p>Can someone help to resolve my issue.</p>