Geolocation plugin with Ionic 4

Ionic Native
1

Hey all,

I’m trying to get the Geolocation plugin working for Ionic4 project. I got the installation without any errors. However when I load the page, I get

ERROR in ./node_modules/@ionic-native/geolocation/index.js
Module not found: Error: Can't resolve 'rxjs/Observable' in `<path>/node_modules/@ionic-native/geolocation'

here is my .ts class

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

@Component({
  selector: 'app-tab2',
  templateUrl: 'tab2.page.html',
  styleUrls: ['tab2.page.scss']
})
export class Tab2Page {

  constructor(private geolocation: Geolocation) {}
}

I had a quick search and I found kind of similar issues for camera and google plus. They both suggests to add ngx at the end of the import. However adding that to the Geolocation gives me this error

Module not found: Error: Can't resolve '@ionic-native/geolocation/ngx'

What could I be doing wrong here ? Following is my ionic config

Ionic:

   ionic (Ionic CLI)             : 4.6.0 (/Users/sameeragayan/.nvm/versions/node/v10.14.2/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.0.0-rc.0
   @angular-devkit/build-angular : 0.11.4
   @angular-devkit/schematics    : 7.1.4
   @angular/cli                  : 7.1.4
   @ionic/angular-toolkit        : 1.2.2

Cordova:

   cordova (Cordova CLI) : 8.1.2 (cordova-lib@8.1.1)
   Cordova Platforms     : android 7.1.4, ios 4.5.5
   Cordova Plugins       : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 2.3.1, (and 5 other plugins)

System:

   Android SDK Tools : 26.1.1 (/Users/sameeragayan/Library/Android/sdk)
   ios-deploy        : 1.9.4
   ios-sim           : 7.0.0
   NodeJS            : v10.14.2 (/Users/sameeragayan/.nvm/versions/node/v10.14.2/bin/node)
   npm               : 6.5.0
   OS                : macOS Mojave
   Xcode             : Xcode 10.1 Build version 10B61

Thanks in advance

cheers,

Sam

2

I found a solution with the help of some SO questions and answers.I got it working with the following and happy to be corrected if I’m doing something not right.

SO questions

Ionic 4 native plugin geolocation gives me “Module not found: Error: Can’t resolve ‘rxjs/Observable’

ionic geolocation plugin error: “No provider for Geolocation”

I added the import to app.module.ts with ngx and also in to providers.

#app.module.ts
# more imports
import { Geolocation } from '@ionic-native/geolocation/ngx';
#.. more imports

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
  providers: [
   .. more providers.. 
   Geolocation,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

and then I import in to the tabs.page.ts as described in the docs

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

@Component({
  selector: 'app-tab2',
  templateUrl: 'tab2.page.html',
  styleUrls: ['tab2.page.scss']
})
export class Tab2Page {

  constructor(private geolocation: Geolocation) {}
  
  locate(){
    this.geolocation.getCurrentPosition().then((resp) => {
      console.log("lat" + resp.coords.latitude + "- long" + resp.coords.longitude)
     }).catch((error) => {
       console.log('Error getting location', error);
     });
  }
}
1 Like
3

Check demo tutorial for Ionic 5 Geolocation here

4

Hi, I managed to get this tutorial working on my own project, but I’m just wondering why the Latitude & Longitude are the same values?

When I run this on my own device, the latitude & longitude values are the exact same, & when I search those values on a map, it isn’t matching up to my current location.

Can you please tell me why this is the case?