ionic geolocation plugin error: "No provider for Geolocation"

Question

I'm trying to use geolocation in my ionic2 hello world project, and I add the ionic plugin "Geolocation" following the instruction on the official site .

I've run these two commands:

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

And this is my home.ts:

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

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  map:any=null;
  geoInfo:any={
      resp:'',
      data:''
  };

  constructor(
      public navCtrl: NavController,
      private geolocation: Geolocation
  ) {

  }

  test(){
      this.geolocation.getCurrentPosition().then((resp) => {
          this.geoInfo.resp=JSON.stringify(resp);
          // resp.coords.latitude
          // resp.coords.longitude
      }).catch((error) => {
          console.log('Error getting location', error);
          this.geoInfo.resp='Error getting location';
      });

      let watch = this.geolocation.watchPosition();
      watch.subscribe((data) => {
          this.geoInfo.data=JSON.stringify(data);
          // data can be a set of coordinates, or an error (if an error occurred).
          // data.coords.latitude
          // data.coords.longitude
      });

  }

}

However, I got the following error in my chrome's console:

EXCEPTION: Error in ./TabsPage class TabsPage - inline template:0:0 caused by: No provider for Geolocation!
error_handler.js:56ORIGINAL EXCEPTION: No provider for Geolocation!

At first I thought it was because I was debugging in browser, but then I got then same error in my Android phone.

So what does "No provider for Geolocation" mean and how should I use geolocation in my ionic2 project?

Thanks a lot!

Answer 1

You need to add the provider to the NgModule, ie module.ts under providers,

providers: [
  Geolocation
]

Answer 2

You need to import the Geolocation class and add it to your list of providers in the app.module.ts file

import { Geolocation } from '@ionic-native/geolocation';

providers: [
     Geolocation
]

Answer 3

that worked for me, I had it imported everywhere but had forgotten to add it to the providers on app.module.ts app.module.ts

import { Geolocation } from '@ionic-native/geolocation';

providers: [
StatusBar,
SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler},
AuthService,
EmailValidator,
DataService,
Geolocation
]

then on the page I was displaying the lat and long to in this instance as a test home;

import { Geolocation } from '@ionic-native/geolocation';
lat: number;
longt: number;

this.geolocation.getCurrentPosition().then((resp) => {
  this.lat = (resp.coords.latitude);
  this.longt =(resp.coords.longitude);
 }).catch((error) => {
   console.log('Error getting location', error);
 });

then on home.html {{lat}} {{longt}}

I know it was only simple but I was just getting the data out before moving onto to placing it into map.

Answer 4

I had the same problem and I face it that I had my native core plugins was not in the same versions into my package.json.

You can check for this solution and this other article at the followings:

https://forum.ionicframework.com/t/cant-resolve-peer-dependencies-after-update/107224/2 https://blog.ionicframework.com/help-test-ionic-native-5/

https://ionicframework.com/docs/native

Answer 5

For Ionic 4 you add to app.module.ts top:

import { Geolocation } from '@ionic-native/geolocation/ngx';

And on the bottom, inside of the Providers array, add Geolocation :

providers: [
    Geolocation,
    ...
]

Answer 6

In 2022 , the following works for me:

I had to do the following changes in order for Geolocation to work:

ionic integrations disable capacitor

ionic cordova plugin add cordova-plugin-geolocation

npm install @awesome-cordova-plugins/geolocation

npm install @awesome-cordova-plugins/core

What the above commands do, in the specified order, is to disable the capacitor integration as cordova plugin will not be installed alongside of the capacitor version. Then install the geolocations plugins and also install the core or else the angular compiler will throw an error.

In app.module.ts , add the following:

import { Geolocation } from '@awesome-cordova-plugins/geolocation/ngx';

providers: [Geolocation],

Once all the above has been configured, within the page where you need the geolocation to trigger, you may add the following code:

import { Component, OnInit } from '@angular/core';
import { Geolocation } from '@awesome-cordova-plugins/geolocation/ngx';

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.page.html',
  styleUrls: ['./dashboard.page.scss'],
})
export class DashboardPage implements OnInit {

  latitude: any;
  longitude: any;

  constructor(private geolocation: Geolocation) { }

  ngOnInit() {
    this.geolocation.getCurrentPosition().then((resp) => {
      this.latitude = resp.coords.latitude;
      this.longitude = resp.coords.longitude;
    }).catch((error) => {
      console.error('Error getting location', error);
    });
  }

}

You will now be able to show the coordinates in the HTML page like so:

{{latitude}} <---> {{longitude}}