Ionic Native Pluginをインストールしたら、vendor.jsエラーでPluginが使えない

はじめに

今回の記事は、IonicやCordovaの開発を長く行ってる人であれば
ハマらない問題だと思うので、初心者向けのものになっています。

概要

Ionic Native のPluginをインストールして、いざ使おうとすると下記のようなエラーが発生してハマりまくりました

TypeError: Object(__WEBPACK_IMPORTED_MODULE_1__ionic_native_core__["cordova"]) is not a function. (In 'Object(__WEBPACK_IMPORTED_MODULE_1__ionic_native_core__["cordova"])(this, "set", {}, arguments)', 'Object(__WEBPACK_IMPORTED_MODULE_1__ionic_native_core__["cordova"])' is an instance of Object)

実行環境

必要なLibraryを情報をまとめます。

Library	Version
typescript	2.6.2
@angular/core	5.2.11
@ionic-native/core	4.11.0

やったこと

iOSアプリで、badgeの制御を追加しようと思い
Badgeをインストールして実行したら使えない問題が発生、、、。

Step1

Badgeに従ってpluginをインストール

install

ionic cordova plugin add cordova-plugin-badge
npm install @ionic-native/badge

ここで、すでに間違いを犯していたことに気づかなかった。

Step2

providersにBadgeを追加する

app.module.ts

// <----- badgeを追加 ----->
import { Badge } from '@ionic-native/badge/ngx';

@NgModule({
  ...
  providers: [
    ...
    // <----- badgeを追加 ----->
    Badge,
    { provide: ErrorHandler, useClass: IonicErrorHandler }
  ]
})
export class AppModule {}

Step3

アプリにbadge: 10を設定してみる

app.component.ts

// <----- badgeを追加 ----->
import { Badge } from '@ionic-native/badge/ngx';

export class MyApp {
  ...

  constructor(
    ...
    private badge: Badge
  ) {
    platform.ready().then(() => {
      ...
      // <----- badge処理を追加 ----->
      this.badge.set(10);
    });
  }
}

【完成イメージ】

Step4

Buildして、Xcodeでアプリをインストールする
起動するとホワイトアウトする、、、。

今回の問題点

Step1でインストールした、pluginのVersionに問題がありました。
pluginのVersionは、@ionic-native/coreのVersionに合わせる必要がありそうです。

それを踏まえて、作業を書き直してみます。

Step1

Badgeに従ってpluginをインストール

install

ionic cordova plugin add cordova-plugin-badge
npm install @ionic-native/badge@4.11.0

Step2

providersにBadgeを追加する

app.module.ts

// <----- badgeを追加 ----->
import { Badge } from '@ionic-native/badge';

@NgModule({
  ...
  providers: [
    ...
    // <----- badgeを追加 ----->
    Badge,
    { provide: ErrorHandler, useClass: IonicErrorHandler }
  ]
})
export class AppModule {}

Step3

アプリにbadge: 10を設定してみる

app.component.ts

// <----- badgeを追加 ----->
import { Badge } from '@ionic-native/badge';

export class MyApp {
  ...

  constructor(
    ...
    private badge: Badge
  ) {
    platform.ready().then(() => {
      ...
      // <----- badge処理を追加 ----->
      this.badge.set(10);
    });
  }
}

Step4

これで、badge: 10を設定することが出来ました！！

【完成イメージ】

参考URL

• Object(WEBPACK_IMPORTED_MODULE_1ionic_native_core__["cordova"]) is not a function.