Ako v Ionic (ver.5) pridať funkciu zistenia vlastnej polohy (geolokácia)

V nasledujúcom je popísaný (asi najjednoduchší) spôsob, ako do Ionic (ver.5) aplikácie pridať geolokáciu (tj.zistenie vlastnej GPS polohy.
Buď už mám nejakú existujúcu Ionic aplikáciu, alebo si ju vytvorím, príkazom:

ionic start Test004 blank --type=angular

V pracovnom adresári tejto Ionic aplikácie je teraz potrebné spustiť príkaz:

ionic cordova platform add android

čo pridá (do našej aplikácie) možnosť využitia frameworku "cordova" (je to knižnica, ktorá sprístupňuje niektoré nízkoúrovňové operácie, napr.kameru, senzory lokácie, ... v mobilnom zariadení).
Týmto si pripravíme používanie "cordova" platformy a nasleduje inštalácia geolokačného pluginu, inŠtalujeme ho príkazom:

ionic cordova plugin add cordova-plugin-geolocation --save

ešte spustiť ďalší príkaz:

npm install --save @ionic-native/geolocation

resp.ak vypisuje nejaké chyby v závislostiach (zvyčajne na knižnici "rxjs", tak to spustiť opakovane s parametrom "--force":

npm install --save @ionic-native/geolocation --force

Tým sme zinštalovali všetky potrebné doplňujúce knižnice.
Možno teraz spustiť samotnú Ionic aplikáciu, príkazom:

ionic serve

a v prehliadači uvidíme:

A teraz nasleduje samotné kódovanie (nebude ho veľa). V tomto testovacom prípade si iba ukážeme ako na hlavnej stránke tejto Ionic aplikácie bude tlačítko, po ktorého stlačení sa vypíše v konzole informácia z geolokačného cordova plugin-u - aj s GPS súradnicami.
Do aplikačného súboru "app.module.ts" doplniť import triedy "Geolocation" z knižnice "@ionic-native/geolocation/ngx" a pridanie tejto triedy medzi "providers", tj.:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';

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

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

A teraz v súboroch stránky "home" doplniť potrebné - najprv si upraviť v súbore layout-u stránky, tj.v "home.page.html" tlačítko s volaním funkcie:

...
<ion-content [fullscreen]="true">
  ...
  <div id="container">
    <ion-button expand="full" color="primary" shape="round" (click)="getLocation()">Refresh location info</ion-button>
  </div>
</ion-content>

A v súbore logiky stránky, tj.v "home.page.ts" doplniť:

import { Component } from '@angular/core';

import { Geolocation ,GeolocationOptions ,Geoposition ,PositionError } from '@ionic-native/geolocation/ngx'; 

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

  locationCordinates: any;

  constructor(
    private geolocation : Geolocation
  ) {  }
  // click na tlacitko [Refresh location info]:
  getLocation() {
    this.getLatLng();
  }
  // zisti GPS polohu:
  getLatLng() {
    // this.loadingLocation = true;
    this.geolocation.getCurrentPosition().then((resp) => {
      console.log(resp);
      this.locationCordinates = resp.coords;
      // this.loadingLocation = false;
    }).catch((error) => {
      // this.loadingLocation = false;
      console.log('Error getting location', error);
    });
  }
}

Ak si zobrazím v prehliadači túto stránku:

a po kliknutí na tlačítko [Refresh location info] sa aktivuje cordova geolokačný plugin, cez ktorý sú načítané údaje, a tie sa objavia vo výpise v konzole:

Poznámka: V prípade reálnej Ionic aplikácie som použil rovnaký postup, ale (už) pri pokuse deklarovať v stránke, v konštruktore triedu "geolocation" mi vypisovalo chybu:

Riešením na tento problém je doplniť deklaráciu providera do súboru modulu stránky "home.module.ts":

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

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    HomePageRoutingModule,
  ],
  providers: [
    Geolocation,
  ],
  declarations: [HomePage]
})
export class HomePageModule {}