Ionic 4 native plugin geolocation gives me "Module not found: Error: Can't resolve 'rxjs/Observable'"

Question

I'm trying to use ionic native plugin geolocation in ionic 4 but I got a this error:

Failed to compile.

./node_modules/@ionic-native/geolocation/index.js Module not found: Error: Can't resolve 'rxjs/Observable' in 'C:\Projects\ionic\prayers\node_modules\@ionic-native\geolocation'

this is my dependencies:

"dependencies": {
    "@angular/common": "6.0.9",
    "@angular/core": "6.0.9",
    "@angular/forms": "6.0.9",
    "@angular/http": "6.0.9",
    "@angular/platform-browser": "6.0.9",
    "@angular/platform-browser-dynamic": "6.0.9",
    "@angular/router": "6.0.9",
    "@ionic-native/core": "5.0.0-beta.14",
    "@ionic-native/geolocation": "^4.11.0",
    "@ionic-native/splash-screen": "5.0.0-beta.14",
    "@ionic-native/status-bar": "5.0.0-beta.14",
    "@ionic/angular": "4.0.0-beta.0",
    "@ionic/ng-toolkit": "1.0.0",
    "@ionic/schematics-angular": "1.0.1",
    "cordova-plugin-geolocation": "^4.0.1",
    "core-js": "^2.5.3",
    "rxjs": "6.2.2",
    "zone.js": "^0.8.26"
  },

this is the code I used:-

app.module.ts

import { Geolocation } from '@ionic-native/geolocation';
...
NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
  providers: [
    StatusBar,
    SplashScreen, Geolocation,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})

home.ts

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

Answer 1

You have rxjs 6.2.2 installed where importing statements are changed.

The stable ionic-native is still using rxjs 5.x.

You can check the migration guide here.

You can either use rxjs-compat

npm i rxjs-compat --save

Or go back to 5.x version.

Another option is to update @ionic-native/geolocation version to 5.0.0-beta14

like your other ionic-native plugins since according to the package.json, it should be using rxjs 6.x

npm i --save @ionic-native/[email protected]

Answer 2

I was facing the same problem and when upgrading Geolocation to 5.0.0-beta.14 I also had to update the import path to:

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

OBS: For other imports like UniqueDeviceID I also had to add the /ngx suffix to the import path.
I think this suffix is required due to version 6 of Angular.