Ioni c 3 Ошибка AdMob: объект (...) не является функцией

Question

Я получаю ошибку во время выполнения: Object (...) не является функцией в плагине AdMob Ioni c 3. Если я не добавлю плагин AdMob, значит, мое приложение работает хорошо, но всякий раз, когда я пытаюсь добавить плагин AdMob, эта ошибка возникает. Может кто-нибудь дать мне решение для этой Ошибка времени выполнения ?

app.module.ts:

    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 { DashboardPageModule } from '../pages/dashboard/dashboard.module';
    import { WorkerDetailsPageModule } from '../pages/worker-details/worker-details.module';
    import { WorkerInTimeAttendancePageModule } from '../pages/worker-in-time-attendance/worker-in-time-attendance.module';
    import { WorkerOutTimeAttendancePageModule } from '../pages/worker-out-time-attendance/worker-out-time-attendance.module';
    import { PaymentRecordsPageModule } from '../pages/payment-records/payment-records.module';
    import { OtherRecordsPageModule } from '../pages/other-records/other-records.module';
    import { ReferenceNumberRecordsPageModule } from '../pages/reference-number-records/reference-number-records.module';
    import { WorkerService } from './services/worker.service';
    import { HttpModule } from '@angular/http';
    import { HttpClientModule } from '@angular/common/http'; 
    import { FullDetailsPageModule } from '../pages/full-details/full-details.module';
    import { NoInternetPageModule } from '../pages/no-internet/no-internet.module';
    import { LockScreenModule, LockScreenComponent } from 'ionic-simple-lockscreen';
    import { AdMobFree } from '@ionic-native/admob-free/ngx'

    @NgModule({
      declarations: [
        MyApp,
      ],
      imports: [
        BrowserModule,
        IonicModule.forRoot(MyApp),
        DashboardPageModule,
        WorkerDetailsPageModule,
        WorkerInTimeAttendancePageModule,
        WorkerOutTimeAttendancePageModule,
        PaymentRecordsPageModule,
        OtherRecordsPageModule,
        ReferenceNumberRecordsPageModule,
        FullDetailsPageModule,
        NoInternetPageModule,
        HttpModule,
        HttpClientModule,
        LockScreenModule
      ],
      bootstrap: [IonicApp],
      entryComponents: [
    MyApp,
    LockScreenComponent
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler},
    WorkerService,
    AdMobFree,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

dashboard.ts:

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, LoadingController } from 'ionic-angular';
import { WorkerService } from '../../app/services/worker.service';
import { WorkerDetailsPage } from '../worker-details/worker-details';
import { WorkerInTimeAttendancePage } from '../worker-in-time-attendance/worker-in-time-attendance';
import { WorkerOutTimeAttendancePage } from '../worker-out-time-attendance/worker-out-time-attendance';
import { PaymentRecordsPage } from '../payment-records/payment-records';
import { OtherRecordsPage } from '../other-records/other-records';
import { ReferenceNumberRecordsPage } from '../reference-number-records/reference-number-records';
import { Http, RequestOptions, Headers } from '@angular/http';
import { NoInternetPage } from '../no-internet/no-internet';

@IonicPage()
@Component({
  selector: 'page-dashboard',
  templateUrl: 'dashboard.html',
})
export class DashboardPage {

  public gridList = [];
  public index: number;
  public pageText;

  constructor(public navCtrl: NavController, public navParams: NavParams, public workerService: WorkerService, public loadingCtrl: LoadingController, public http: Http) {

  }

  showBanner() {
    this.workerService.bannerAd();
  }

  ionViewWillEnter() {
    if (navigator.onLine == false) {
      this.navCtrl.push(NoInternetPage);
      this.navCtrl.setRoot(NoInternetPage);
    }
    else {
      this.gridList = this.workerService.getGridList();
      if (this.workerService.workerList.length == 0) {
        this.fetchData();
      }
    }
  }

  fetchData() {
    var headers = new Headers();
    headers.append("Accept", 'application/json');
    headers.append('Content-Type', 'application/json');
    let options = new RequestOptions({
      headers: headers
    });

    let loader = this.loadingCtrl.create({
      content: "Fetching worker's details...",
    });

    let data = {
      mode: "workerDetails"
    }

    loader.present().then(() => {
      this.http.post('http://sidsk99.heliohost.org/musterRoll/fetch_data.php', data, options)
        .map(res => res.json())
        .subscribe(res => {
          this.workerService.workerList = res.server_response;
          loader.dismiss();
        });
    });
  }

  getPageTitle(index) {
    this.pageText = this.workerService.getSpecificGridText(index);
    if(this.pageText === "Workers List") {
      this.navCtrl.push(WorkerDetailsPage);
      this.navCtrl.setRoot(WorkerDetailsPage);
    } else if (this.pageText === "In Time Attendance") {
      this.navCtrl.push(WorkerInTimeAttendancePage);
      this.navCtrl.setRoot(WorkerInTimeAttendancePage);
    } else if (this.pageText === "Out Time Attendance") {
      this.navCtrl.push(WorkerOutTimeAttendancePage);
      this.navCtrl.setRoot(WorkerOutTimeAttendancePage);
    } else if (this.pageText === "Payment Records") {
      this.navCtrl.push(PaymentRecordsPage);
      this.navCtrl.setRoot(PaymentRecordsPage);
    } else if (this.pageText === "Daily Work Report") {
      this.navCtrl.push(OtherRecordsPage);
      this.navCtrl.setRoot(OtherRecordsPage);
    } else if (this.pageText === "Reference Number Records") {
      this.navCtrl.push(ReferenceNumberRecordsPage);
      this.navCtrl.setRoot(ReferenceNumberRecordsPage);
    }
  }

}

панель инструментов. html:

<ion-header>
  <ion-navbar>
    <ion-buttons left>
      <button ion-button icon-only menuToggle>
        <img src="assets/svgIcons/menu.svg" alt="Menu" style="width: 25px; height: 25px; padding-top: 5px;">
      </button>
    </ion-buttons>
    <ion-title class="fontChange"><b style="font-size: 15px;">
      <img src="assets/svgIcons/dashboard.svg" alt="Dashboard" style="width: 20px; height: 20px;"> Dashboard</b></ion-title>
  </ion-navbar>

</ion-header>

<ion-content padding class="fontChange">
  <ion-grid style="margin-bottom: 100px; margin-left: auto; margin-right: auto;">
    <ion-row>
      <ion-col col-6 *ngFor="let grid of gridList; let i = index">
        <div style="border-radius: 10px; height: 90%;" class="w3-card-4" (click)="getPageTitle(i)">
          <img class="w3-image" style="display: block; margin-top: 20px; margin-bottom: 20px; margin-left: auto; margin-right: auto; padding-top: 20px; width: 70px; height: 70px;" src="{{ grid.image }}" alt="{{ grid.text }}">
          <p style="font-size: 15px; text-align: center; margin: auto; padding: 10px;">
            <b>{{ grid.text }}</b>
          </p>
        </div>
      </ion-col>
    </ion-row>
  </ion-grid>
  <button ion-button (click)="showBanner()">Banner</button>
</ion-content>

worker.service.ts:

import { Injectable } from "@angular/core";
import { AlertController, ToastController } from "ionic-angular";
import { AdMobFree, AdMobFreeBannerConfig } from '@ionic-native/admob-free/ngx';

@Injectable()
export class WorkerService {

constructor(public alertCtrl: AlertController, public toastCtrl: ToastController, private admobFree: AdMobFree) {

}

bannerAd() {
    let bannerConfig: AdMobFreeBannerConfig = {
        id: "ca-app-pub-5831104849889419~9333214679",
        isTesting: false,
        autoShow: true
    };
    this.admobFree.banner.config(bannerConfig);
    this.admobFree.banner.prepare().then(() => {}).catch(e => alert(e));
}

workerList = [];
passcodes = [];
specificWorkerDetail;

private textImageList = [{
    text: 'Dashboard',
    image: 'assets/svgIcons/dashboard.svg'
},
{
    text: 'Workers List',
    image: 'assets/svgIcons/worker.svg'
},
{
    text: 'In Time Attendance',
    image: 'assets/svgIcons/entry.svg'
},
{
    text: 'Out Time Attendance',
    image: 'assets/svgIcons/exit.svg'
},
{
    text: 'Payment Records',
    image: 'assets/svgIcons/paymentRecords.svg'
},
{
    text: 'Daily Work Report',
    image: 'assets/svgIcons/otherRecords.svg'
},
{
    text: 'Reference Number Records',
    image: 'assets/svgIcons/reference.svg'
}];

private gridList = [{
    text: 'Workers List',
    image: 'assets/svgIcons/worker.svg'
},
{
    text: 'In Time Attendance',
    image: 'assets/svgIcons/entry.svg'
},
{
    text: 'Out Time Attendance',
    image: 'assets/svgIcons/exit.svg'
},
{
    text: 'Payment Records',
    image: 'assets/svgIcons/paymentRecords.svg'
},
{
    text: 'Daily Work Report',
    image: 'assets/svgIcons/otherRecords.svg'
},
{
    text: 'Reference Number Records',
    image: 'assets/svgIcons/reference.svg'
}];

getTextImageList() {
    return [...this.textImageList];
}

getSpecificDetailText(index) {
    return this.textImageList[index].text
}

getGridList() {
    return [...this.gridList];
}

getSpecificGridText(index) {
    return this.gridList[index].text
}

showAlert(header, middle, content) {
    let alert = this.alertCtrl.create({
        title: header,
        subTitle: middle,
        message: content,
        buttons: ['OK']
    });
    alert.present();
}

showToast(content, side) {
    let toast = this.toastCtrl.create({
        message: content,
        duration: 1500,
        position: side 
    });
    toast.present();
}
}

Answer 1

Устранена ошибка. Фактически при запуске команды 'npm install -save @ ioni c -native / admob-free@4' устанавливается совместимая версия плагина AdMobFree для Ioni c 3.