Ionic5, cordova geolocation plugin and Error: Uncaught (in promise): NullInjectorError: R3InjectorError

cordova
1

hi friends,
pls help me - I have issue/error:

20230104-004a
20230104-004a807×367 14.7 KB

in my ionic (ver.5) application, page “myposition” - with code:

import { Component, OnInit } from '@angular/core';
import { Geolocation, GeolocationOptions, Geoposition, PositionError } from '@ionic-native/geolocation/ngx';
import { NavController } from '@ionic/angular';
import { ApiService } from '../../services/api.service';
import { EnvService } from '../../services/env.service';

declare var H;

@Component({
  selector: 'app-myposition',
  templateUrl: './myposition.page.html',
  styleUrls: ['./myposition.page.scss'],
})
export class MypositionPage implements OnInit {
  pageContent = null;
  tProfile = null;
  platform: any;
  locationCordinates: any;
  map: any;
    
  constructor(
    private api: ApiService,
    private navCtrl: NavController,
    private env: EnvService,
    private geolocation: Geolocation,   // public geolocation: Geolocation, THE SAME ERROR!!!
  ) { }

No other use class “geolocation” in code, because of this error.

for full detail:
I installed cordova geolocation plugin (into existing application) in following way:

> ionic cordova platform add android
> ionic cordova plugin add cordova-plugin-geolocation --save
> npm install --save @ionic-native/geolocation

then add to “app.module.ts” geolocation imported from “@ionic-native/geolocation/ngx” and put it into “providers”:

import { RouteReuseStrategy } from '@angular/router';
import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { HttpClientModule } from '@angular/common/http';
import { Geolocation } from '@ionic-native/geolocation/ngx';
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
import { library } from '@fortawesome/fontawesome-svg-core';
import { fas } from '@fortawesome/free-solid-svg-icons';
import { far } from '@fortawesome/free-regular-svg-icons';
import { fab } from '@fortawesome/free-brands-svg-icons';

library.add(fas,far,fab);

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

Alternatively, If I create new Ionic (ver.5) application and install cordova geolocation plugin in the same way and add the same pieces of code to “app.module.ts” and to page file “any.page.ts” everything is OK (no error).

Any Idea, what is wrong?

very thanks

2

Hi, you can try to add Geolocation into MypositionPageModule’s providers array:

// ...

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

@NgModule({
  imports: [
    IonicModule,
    CommonModule,
    FormsModule,
    // ...
  ],
  providers: [
    Geolocation, // 👈 add Geolocation into MypositionPageModule's providers array
  ],
  declarations: [
    MypositionPage,
  ]
})
export class MypositionPageModule {}
3

Very thanx, it works!

1 Like