How to solve TrackingPage.html:24 ERROR TypeError: Cannot read property 'unsubscribe' of undefined?

Question

I am trying to build a location tracking app with Ionic an Cordova Geolocation plugin. However, when hitting the stopLocationWatch() button, I got this error:

TrackingPage.html:24 ERROR TypeError: Cannot read property 'unsubscribe' of undefined

Does anyone knows how to fix this?

tracking.page.ts

import { Component, OnInit } from '@angular/core';
import { Geolocation } from '@ionic-native/geolocation/ngx';

import { GeolocationService } from '../../app/geolocation.service';
import { UserService } from '../../app/user.service';

@Component({
  selector: 'app-tracking',
  templateUrl: './tracking.page.html',
  styleUrls: ['./tracking.page.scss'],
})
export class TrackingPage implements OnInit {
  geoLatitude: number;
  geoLongitude: number;
  geoAccuracy: number;
  timeStamp: string;
  uId = this.userService.getUserId();

  watchLocationUpdates: any;
  isWatching: boolean;

  constructor(
    private geolocation: Geolocation,
    public geolocationService: GeolocationService,
    public userService: UserService) {
     }

  ngOnInit() {
    document.addEventListener('deviceready', onDeviceReady, false);
    function onDeviceReady() {
        console.log('navigator.geolocation works well');
    }
  }

  // Start location update watch
  watchLocation() {
    const options = {
      maximumAge: 3600000,
      timeout: 5000,
      enableHighAccuracy: true,
    };
    this.isWatching = true;
    this.watchLocationUpdates = this.geolocation.watchPosition(options);
    this.watchLocationUpdates.subscribe((resp) => {
      this.geoLatitude = resp.coords.latitude;
      this.geoLongitude = resp.coords.longitude;
      this.geoAccuracy = resp.coords.accuracy;
      this.timeStamp = resp.timestamp;
      console.table('watchLocation function called', {
        latitude: this.geoLatitude,
        longitude: this.geoLongitude,
        accuracy: this.geoAccuracy,
        timeStamp: this.timeStamp,
        uId: this.uId
        });
      this.geolocationService.insertUserGeolocation({
        latitude: this.geoLatitude,
        longitude: this.geoLongitude,
        accuracy: this.geoAccuracy,
        timeStamp: this.timeStamp,
        uId: this.uId
        })
        .subscribe((response) => {
          localStorage.setItem('lastLocation', JSON.stringify({
            latitude: this.geoLatitude,
            longitude: this.geoLongitude,
            accuracy: this.geoAccuracy,
            timeStamp: this.timeStamp,
            uId: this.uId
            }));
          console.log(`user location data inserted in FB`, {
            latitude: this.geoLatitude,
            longitude: this.geoLongitude,
            accuracy: this.geoAccuracy,
            timeStamp: this.timeStamp,
            uId: this.uId
            });
        });
      });
  }

  // Stop location update watch
  stopLocationWatch() {
    this.isWatching = false;
    console.log('this.isWatching = ', this.isWatching);
    this.watchLocationUpdates.unsubscribe();
  }
}

tracking.page.html

<ion-header>
  <ion-toolbar color="primary">
    <ion-title>
      <div class="titleicon">
        <div class="logo-img"><img src="../assets/logo.png" width="120px" /></div>
      </div>
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content class="ion-padding" style="text-align: center;">
  <div>

    <h4>Latitude: {{ geoLatitude }}</h4>
    <h4>Longitude: {{ geoLongitude }}</h4>
    <p>Genauigkeit: {{ geoAccuracy }} m</p>

  </div>

  <ion-button (click)="watchLocation()">
    Route starten
  </ion-button>
  <br>
  <ion-button (click)="stopLocationWatch()" color="danger">
    Route beenden
  </ion-button>

</ion-content>

Answer 1

The problem here is, you are trying to unsubscribe an observable.

We can only unsubscribe the subscription of an observable.

The below code can solve your problem,

import { Subscription } from "rxjs";

watchLocationUpdatesSub: Subscription; // Add this property to the ts class

// Update your watch location method as,
...
this.watchLocationUpdates = this.geolocation.watchPosition(options);
this.watchLocationUpdatesSub = this.watchLocationUpdates.subscribe((resp) => {
   ...
   // entire subscribe code block as above
   ...
}

stopLocationWatch() {
   this.isWatching = false;
   console.log('this.isWatching = ', this.isWatching);
   this.watchLocationUpdatesSub.unsubscribe(); // a change here as well
}