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?

Exercitation

Answer 1

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

providers: [
  Geolocation
]

Ingredient

After adding Geolocation to app.module.ts, I got a new error: Uncaught ReferenceError: Geolocationa is not defined. – Exercitation

check for the spelling Geolocationa – Ingredient

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
]

Margaretmargareta

In Ionic 4 when I add Geolocation to providers I get this error: Invalid provider for the NgModule 'AppModule' - only instances of Provider and Type are allowed, got: [AuthGuardService, StatusBar, SplashScreen, ?[object Object]?, ...], the last one is the Geolocation – Ruppert

@devnosaur, you have to use import like: import {Geolocation} from '@ionic-native/geolocation/ngx'; – Desdamonna

@EgorMedvedev Thank you! The /ngx was the key for me in Ionic 4! You should make that into an answer so it's easier to find. – Aristotle

Answer 3

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,
    ...
]

Georgetown

I confirm that this works perfectly as of Feb 2020. Thanks a ton for sharing! – Torrietorrin

Answer 4

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.

Filtration

Answer 5

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

Crinoid

what is the specific instructions from these links which would help resolve the question? – Splitting

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}}

Torrietorrin