How can I use the GeoLocation PlugIn in Ionic 3? - ionic-framework

Question

I'm having difficulties with getting GeoLocation working in Ionic 3. I've
looked at several tutorials and run into the same problem with all of them.
Here is my setup.
PS C:\> ionic info
cli packages: (C:\Users\myID\AppData\Roaming\npm\node_modules)
#ionic/cli-utils : 1.9.2
ionic (Ionic CLI) : 3.9.2
global packages:
Cordova CLI : 8.1.2 (cordova-lib#8.1.1)
local packages:
#ionic/app-scripts : 3.1.0
Cordova Platforms : none
Ionic Framework : ionic-angular 3.9.2
System:
Android SDK Tools : 26.1.1
Node : v8.10.0
npm : 5.6.0
OS : Windows 10
PS C:\>
PS C:\>
PS C:\>
PS C:\> ionic cordova plugin list
> cordova plugin ls
v Running command - done!
cordova-plugin-geolocation 4.0.1 "Geolocation"
PS C:\>
PS C:\>
PS C:\>
In setting up a hello-world / blank geo location app, I get errors referencing the
GeoLocation plugin.
// app.module.ts
import { Geolocation } from '#ionic-native/geolocation';
// ...
providers: [
StatusBar,
SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler},
Geolocation // <-- Errors here
]
I can get around this error by adding the ngx suffix:
// app.module.ts
import { Geolocation } from '#ionic-native/geolocation/ngx';
// ...
providers: [
StatusBar,
SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler},
Geolocation // OK now
]
However, when I actually go to use it:
//home.ts
import { Component } from '#angular/core';
import { NavController } from 'ionic-angular';
import { Geolocation } from '#ionic-native/geolocation/ngx';
#Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
lat: any;
lng: any;
constructor(public navCtrl: NavController,
public geo: Geolocation) {
}
ionViewDidLoad() {
this.geo.getCurrentPosition().then(pos => {
this.lat = pos.coords.latitude;
this.lng = pos.coords.longitude;
}).catch(err => console.log(err));
}
}
I start getting this error:
TypeError: Object(...) is not a function at Geolocation.getCurrentPosition
Commenting out the call to getCurrentPosition makes the error go away.
What have I missed? Have I got the wrong version of the plugin? Is there a way
to know which one works with the last version of Ionic 3?

Answer 1

Did you install the Geolocation plugin v3? As you can see here, the command is:
$ ionic cordova plugin add cordova-plugin-geolocation --variable GEOLOCATION_USAGE_DESCRIPTION="To locate you"
$ npm install --save #ionic-native/geolocation#4
After installing it, you have to import the plugin into app.module as well into your home.ts
import { Geolocation } from '#ionic-native/geolocation';
The code to use the plugin is right, so you don't need to change it.
this.geo.getCurrentPosition().then(pos => {
this.lat = pos.coords.latitude;
this.lng = pos.coords.longitude;
}).catch(err => console.log(err));