Can't resolve all parameters for LocationTracker

Question

i'm trying to follow this sample code by Josh Morony, but I can't seem to find how to fix this.

I get an Error from console, it's display on webrowser, and even on device.

I have added the plugins:

$ ionic cordova plugin add cordova-plugin-geolocation
$ npm install --save @ionic-native/geolocation
$ ionic cordova plugin add cordova-plugin-mauron85-background-geolocation
$ npm install --save @ionic-native/background-geolocation

Here is the error message

Uncaught Error: Can't resolve all parameters for LocationTracker: ([object Object], [object Object], [object Object], ?).at syntaxError (file:///android_asset/www/build/vendor.js:79310:34)
    at CompileMetadataResolver._getDependenciesMetadata (file:///android_asset/www/build/vendor.js:92647:35)
    at CompileMetadataResolver._getTypeMetadata (file:///android_asset/www/build/vendor.js:92515:26)
    at CompileMetadataResolver._getInjectableMetadata (file:///android_asset/www/build/vendor.js:92501:21)
    at CompileMetadataResolver.getProviderMetadata (file:///android_asset/www/build/vendor.js:92791:40)
    at file:///android_asset/www/build/vendor.js:92720:49
    at Array.forEach (native)
    at CompileMetadataResolver._getProvidersMetadata (file:///android_asset/www/build/vendor.js:92681:19)
    at CompileMetadataResolver.getNgModuleMetadata (file:///android_asset/www/build/vendor.js:92336:50)
    at JitCompiler._loadModules (file:///android_asset/www/build/vendor.js:103400:66)

pages/home/home.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { LocationTracker } from '../../providers/location-tracker/location-tracker';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

constructor(public navCtrl: NavController, public locationTracker: LocationTracker) {

    this.startTracking();
  }

  startTracking(){
    this.locationTracker.startTracking();
  }

  stopTracking(){
    this.locationTracker.stopTracking();
  }
}

/pages/home/home.html

<ion-content padding>
  <ion-label>Current Latitude: {{locationTracker.lat}</ion-label>
  <ion-label>Current Longitude: {{locationTracker.lng}}</ion-label>
</ion-content>

/providers/location-tracker/location-tracker.ts

import { Injectable, NgZone } from '@angular/core';
import { BackgroundGeolocation } from '@ionic-native/background-geolocation';
import { Geolocation, Geoposition } from '@ionic-native/geolocation';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/filter';

@Injectable()
export class LocationTracker {

  public watch: any;    
  public lat: number = 0;
  public lng: number = 0;

  constructor(public zone: NgZone, public backgroundGeolocation: BackgroundGeolocation, public geolocation: Geolocation, public geoposition: Geoposition) {

  }

  startTracking() {

    // Background Tracking

    let config = {
      desiredAccuracy: 0,
      stationaryRadius: 20,
      distanceFilter: 10, 
      debug: true,
      interval: 2000 
    };

    this.backgroundGeolocation.configure(config).subscribe((location) => {

      console.log('BackgroundGeolocation:  ' + location.latitude + ',' + location.longitude);

      // Run update inside of Angular's zone
      this.zone.run(() => {
        this.lat = location.latitude;
        this.lng = location.longitude;
      });

    }, (err) => {

      console.log(err);

    });

    // Turn ON the background-geolocation system.
    this.backgroundGeolocation.start();


    // Foreground Tracking

    let options = {
      frequency: 3000, 
      enableHighAccuracy: true
    };

    this.watch = this.geolocation.watchPosition(options).filter((p: any) => p.code === undefined).subscribe((position: Geoposition) => {

      console.log(position);

      // Run update inside of Angular's zone
      this.zone.run(() => {
        this.lat = position.coords.latitude;
        this.lng = position.coords.longitude;
      });

    });
  }

  stopTracking() {
   console.log('stopTracking');

    this.backgroundGeolocation.finish();
    this.watch.unsubscribe();
  }
}

app/app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { StatusBar } from '@ionic-native/status-bar';
import { LocationTracker } from '../providers/location-tracker/location-tracker';
import { BackgroundGeolocation } from '@ionic-native/background-geolocation';
import { Geolocation } from '@ionic-native/geolocation';


@NgModule({
  declarations: [
    MyApp,
    HomePage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
    HttpModule
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage
  ],
  providers: [
    StatusBar
    {provide: ErrorHandler, useClass: IonicErrorHandler}
    LocationTracker,
    BackgroundGeolocation,
    Geolocation
  ]
})
export class AppModule {}

Answer 1

If you taje a look at the error, it says that the fourth parameter couldn't be injected

Uncaught Error: Can't resolve all parameters for LocationTracker: ([object Object], [object Object], [object Object], ?)

Looking at your code from the Injectable

constructor(public zone: NgZone,
            public backgroundGeolocation: BackgroundGeolocation,
            public geolocation: Geolocation,
            public geoposition: Geoposition) {
}

the fourth is this Geoposition, which is seems you are not 'providing' in the NgModule.

So, as long as you are not using this 'geoposition' instance/object, you can simply remove it from the constructor:

constructor(public zone: NgZone,
            public backgroundGeolocation: BackgroundGeolocation,
            public geolocation: Geolocation) {
}