Ionic 2 geolocation not working on Android device

Question

I'm trying to get current geolocation in Ionic 2 to work on Android devices. In the browser it works well, but when I run the ionic cordova run android command to deploy on device the geolocation doesn't execute at all, and I get the following errors:

Angular 2 is running in the development mode. Call enableProdMode() to enable the production mode. main.js:48746 

Native: deviceready did not fire within 2000ms. This can happen when plugins are in an inconsistent state. Try removing plugins from plugins/ and reinstalling them. cordova.js:1223 (anonymous) @ main.js:48746

deviceready has not fired after 5 seconds. main.js:48741 

DEVICE READY FIRED AFTER 3656 ms main.js:119892 

Ionic Native: deviceready event fired after 3519 ms main.js:122839 

Ionic Storage driver: asyncStorage main.js:50230 

navigator.geolocation works well main.js:8291 

PlacesPage ionViewDidLoad error: this.getGeolocation is not a function

Mainly, what I don't understand is that I get the this.getGeolocation is not a function because how did that change from browser to device?

import { Geolocation } from '@ionic-native/geolocation';
...
constructor(private geolocation: Geolocation) {}
...
ionViewDidLoad() {
    if(this.platform.is('cordova') === true){
        document.addEventListener("deviceready", onDeviceReady, false);
    }else{
        console.log('Browser geolocation')
        this.getGeolocation();
    }

    function onDeviceReady() {
        console.log("navigator.geolocation works well");
        this.getGeolocation();
    }
}

getGeolocation(){
    console.log('Starting Geolocation');

    var options = {
        enableHighAccuracy: true
    };

    this.geolocation.getCurrentPosition(options)
    .then((position) => {
        console.log('Geolocation successful');

        this.currentLocation = {
            lat: position.coords.latitude,
            lng: position.coords.longitude
        };

        let query = '?lat=' + position.coords.latitude + '&lng=' + position.coords.longitude;

        this.updatePlaces(query);

    }).catch((error) => {
        console.log('Error getting location', error);
    });
}

I have tried removing all plugins and reinstalling them. I have added a Content-Security-Policy to index.html.

Can anybody tell me what's wrong or guide me in a right direction? Thanks.

Answer 1

your code doesn't seems correct to me. Change your code to below:

import { Geolocation } from '@ionic-native/geolocation';
...
constructor(private geolocation: Geolocation) {}
...
ionViewDidLoad() {
    if(this.platform.is('cordova') === true){
        document.addEventListener("deviceready", onDeviceReady, false);
    }else{
        console.log('Browser geolocation')
        this.getGeolocation();
    }
}

function onDeviceReady() {
        console.log("navigator.geolocation works well");
        this.getGeolocation();
    }

getGeolocation(){
    console.log('Starting Geolocation');

    var options = {
        enableHighAccuracy: true
    };

    this.geolocation.getCurrentPosition(options)
    .then((position) => {
        console.log('Geolocation successful');

        this.currentLocation = {
            lat: position.coords.latitude,
            lng: position.coords.longitude
        };

        let query = '?lat=' + position.coords.latitude + '&lng=' + position.coords.longitude;

        this.updatePlaces(query);

    }).catch((error) => {
        console.log('Error getting location', error);
    });
}

Answer 2

I seem to have solved the issue. The problem was that I have been mixing the implementation of Cordova's geolocation and the implementation for Ionic. In Ionic it's not needed to add the event listener (I guess it handles that under the hood) as seen in the docs , so the proper implementation should be like this:

import { Geolocation } from '@ionic-native/geolocation';
...
constructor(private geolocation: Geolocation) {}
...
ionViewDidLoad() {
    this.getGeolocation();
}

getGeolocation(){
    console.log('Starting Geolocation');

    var options = {
        enableHighAccuracy: true
    };

    this.geolocation.getCurrentPosition(options)
    .then((position) => {
        console.log('Geolocation successful');

        this.currentLocation = {
            lat: position.coords.latitude,
            lng: position.coords.longitude
        };

        let query = '?lat=' + position.coords.latitude + '&lng=' + position.coords.longitude;

        this.updatePlaces(query);

    }).catch((error) => {
        console.log('Error getting location', error);
    });
}

I already had this code before I implemented the event listener, but at that time the plugins were failing, so it was an attempt to fix that, which got to implement the event listener. Thanks to @Prerak Tiwari for making me think in the right direction.