Какой файл .ts для редактирования в Ionic для использования плагина?

Question

Я новичок в разработке Ionic и пытаюсь учиться.Я создаю базовое приложение, чтобы просто отображать координаты GPS, чтобы изучить основы разработки IOnic.

Пока у меня есть базовая раскладка, и я сейчас пытаюсь научиться включать плагин геолокации .

В разделе «Использование» приведен базовый код, используемый для реализации плагина, но я не уверен, в какой файл он входит.

Я редактирую макет главной страницы моего простого приложения в ionic-> gpsTest-> src-> app-> home

И я редактирую файл home.page.html.Когда я редактирую этот файл и использую команду ionic serve, он показывает мое приложение в веб-браузере и выглядит хорошо.Но теперь, где отредактировать javascript для страницы в ионной структуре?

Затем я обратился к этому руководству за помощью по добавлению плагина gps.

Но когда яперейдите к части, которая гласит:

Теперь, чтобы использовать API Geolocation, вам нужно импортировать его из модуля ionic-native, поэтому откройте файл home.ts или где угодно в своем коде.для доступа к функциям геолокации и добавьте следующую строку кода:

Я не знаю, какой файл .ts нужно редактировать.В моем каталоге ionic-> gpsTest-> src-> app-> home есть три файла .ts

1. home.module.ts
2. home.page.spec.ts
3. home.page.ts

Обновление:

После дополнительных исследований я нашел эту статью здесь .Эта статья помогла мне узнать о структуре Ionic.

Затем я отредактировал свой файл home.module.ts, чтобы он выглядел так:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { IonicModule } from '@ionic/angular';
import { FormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router';
import { Geolocation } from '@ionic-native/geolocation/ngx';


import { HomePage } from './home.page';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    RouterModule.forChild([
      {
        path: '',
        component: HomePage
      }
    ])
  ],
  declarations: [HomePage]
})
export class HomePageModule {}


constructor(private geolocation: Geolocation) {}

Geolocation.getCurrentPosition().then((data) => {
            console.log('My latitude : ', data.coords.latitude);
            console.log('My longitude: ', data.coords.longitude);
        });

Но когда я пытаюсь запустить его в браузереЯ получаю эту ошибку:

Cannot GET /

Update2:

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

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

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

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

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

Answer 1

в app.module.ts вы включили Geolocation в качестве поставщика?

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';

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


@NgModule({
  declarations: [
    MyApp,
    HomePage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    Geolocation,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}