title: Angular http post error: Cannot read property 'post' of undefined
body: <p>I am trying to make my first http POST request. I have the GET request working fine (in the same service), but when I try and make a POST request I am getting the error</p>
  
  <blockquote>
    <p>ERROR TypeError: Cannot read property 'post' of undefined
            at 
        ApiService.push../src/app/services/api.service.ts.ApiService.getTracsStartEvents
    (api.service.ts:57)</p>
  </blockquote>
  
  <p>I'm using it in the same way I'm using the GET request, in the same file. I don't understand why the POST request isn't working. I must have something wrong syntactically. Can anyone point me in the right direction?</p>
  
  <pre><code>import { Device } from '../shared/device';
  import { Injectable } from '@angular/core';
  import { HttpClient, HttpHeaders } from '@angular/common/http';
  
  @Injectable({
    providedIn: 'root'
  })
  
  export class ApiService {
    TRACS_URL = '&lt;REMOVED&gt;';
    DELORME_LOCATE_URL = '&lt;REMOVED&gt;';
  
    apiKey = '&lt;REMOVED&gt;';
    getAllDeviceAPI = 'PApps_AircraftInfo';
    getDeviceByIMEIAPI = 'PApps_AircraftInfo/FindByIMEI/';
    getDeviceByTailNumberAPI = 'PApps_AircraftInfo/FindByTailNumber/';
    getDeviceByCallsignAPI = 'PApps_AircraftInfo/FindByCallsign/';
    getTracsStartEventsAPI = 'GetStartTrackEvents';
  
    constructor(private httpClient: HttpClient) {}
  
    public createDevice( device: Device ){}
  
    public updateDevice( device: Device ) {
      console.log('going to call API to update device: ', device)
    }
  
    public deleteDevice( device: Device ) {
      console.log('going to call API to delete device: ', device);
    }
  
    public getDeviceByIMEI( imei: string ) {
      return this.httpClient.get&lt;Device[]&gt;(`${this.TRACS_URL}/${this.getDeviceByIMEIAPI}/${imei}?apikey=${this.apiKey}`);
    }
  
    public getDeviceByTailNumber( tailNumber: string ) {
      return this.httpClient.get&lt;Device[]&gt;(`${this.TRACS_URL}/${this.getDeviceByTailNumberAPI}/${tailNumber}?apikey=${this.apiKey}`);
    }
    public getDeviceByCallsign( callsign: string ) {
      return this.httpClient.get&lt;Device[]&gt;(`${this.TRACS_URL}/${this.getDeviceByCallsignAPI}/${callsign}?    apikey=${this.apiKey}`);
    }
    public getAllDevices( url?: string ) {
      return this.httpClient.get&lt;Device[]&gt;(`${this.TRACS_URL}/${this.getAllDeviceAPI}?apikey=${this.apiKey}`);
    }
  
    public getTracsStartEvents( imeiList: string[] ) {
      console.log('imeiList: ', imeiList );
      const httpHeaders = new HttpHeaders({
          'x-api-key': 'Ra4GyPWuzU1PKDKdmHyyK4WlMKV7v3j4JQhaU7i8',
          'Content-Type': 'application/json-patch+json',
          'Cache-Control': 'no-cache',
      });
      let options = {
        headers: httpHeaders
      };
      return this.httpClient.post&lt;any[]&gt;    (`${this.DELORME_LOCATE_URL}/${this.getTracsStartEvents}`,
        {
          data: { arr_imei: imeiList,
                  searchType: 'REALTIME',
                }
        }, options ).subscribe( res =&gt; {
          console.log('query result:', res );
        });
      }
  }
  </code></pre>
  
  <p>Here is where I call the post function (this is from another service that is to get location updates):</p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import { ApiService } from './api.service';
  
  import { GeoJson } from '../shared/geo-json';
  
  @Injectable({
    providedIn: 'root'
  })
  
  export class PositionUpdateService {
    positionUpdate: GeoJson;
  
    constructor(private apiService: ApiService,
                ) {
      this.positionUpdate = new GeoJson( 'Feature',
      {type: 'Point', coordinates: [-121.0, 37.5, 1000]} );
      //console.log('posUpdate: this.positionUpdate: ', this.positionUpdate );
   }
  
    getMissionStartEvents( devices ) {
      console.log('posUpdate svc, getMissionStartevents, imeis: ', devices);
      const events =  this.apiService.getTracsStartEvents( devices );
      console.log(events);
    }
  }
  </code></pre>
  
  <p>and where it all starts in my <code>HomeComponent</code>:</p>
  
  <pre><code>export class HomeComponent implements OnInit, OnChanges {
     constructor(public appSettingsService: AppSettingsService,
                 public layerControlDialogComponent: MatDialog,
                 private devicesToTrackService: DevicesToTrackService,
                 private positionUpdateService: PositionUpdateService,
                 private httpClient: HttpClient) { }
    startTracking(devices) {
       console.log('going to start tracking ', devices);
       this.positionUpdateService.getMissionStartEvents(devices)
    }
  </code></pre>