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

# はじめに

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

# 概要

[Ionic Native](https://ionicframework.com/docs/native) のPluginをインストールして、いざ使おうとすると下記のようなエラーが発生してハマりまくりました :cry: 

```
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](https://ionicframework.com/docs/native/badge)をインストールして実行したら使えない問題が発生、、、。

## Step1

[Badge](https://ionicframework.com/docs/native/badge)に従ってpluginをインストール

```bash:install
ionic cordova plugin add cordova-plugin-badge
npm install @ionic-native/badge
```

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

## 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);
    });
  }
}
```

【完成イメージ】
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/65794/f61e4a29-3c8c-37b4-e41d-e651c90e727d.png)

## Step4

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

# 今回の問題点

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

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

## Step1

[Badge](https://ionicframework.com/docs/native/badge)に従ってpluginをインストール

```bash: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`を設定することが出来ました！！

【完成イメージ】
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/65794/f61e4a29-3c8c-37b4-e41d-e651c90e727d.png)


# 参考URL

- [Object(__WEBPACK_IMPORTED_MODULE_1__ionic_native_core__["cordova"]) is not a function.](https://www.bountysource.com/issues/75952057-object-__webpack_imported_module_1__ionic_native_core__-cordova-is-not-a-function)