소개

이번 기사는, Ionic 이나 Cordova 의 개발을 길게 실시하고 있는 사람이면
빠지지 않는 문제라고 생각하기 때문에, 초보자용의 것이 되고 있습니다.

개요

Ionic Native의 플러그인을 설치하고 가끔 사용하려고하면 아래와 같은 오류가 발생하여 빠졌습니다

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
버전


typescript
2.6.2

@angular/core
5.2.11

@ionic-native/core
4.11.0

했던 일

iOS 앱에서 버지 컨트롤을 추가하려고합니다.
배지 설치하고 실행하면 사용할 수 없는 문제가 발생합니다.

Step1

배지에 따라 플러그인 설치

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

빌드하여 Xcode로 앱 설치
시작하면 화이트 아웃,,,.

이번 문제점

Step1에서 설치 한 플러그인 버전에 문제가있었습니다.
plugin의 Version은, @ionic-native/core 의 Version에 맞출 필요가 있을 것 같습니다.

이를 바탕으로 작업을 다시 작성해 봅니다.

Step1

배지에 따라 플러그인 설치

install

ionic cordova plugin add cordova-plugin-badge
npm install @ionic-native/[email protected]

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.