Ionic2 - Using Cordova plugin

Question

I just wanna use this Cordova plugin:

https://github.com/Rohfosho/CordovaCallNumberPlugin

For this purpose I created an Ionic2 brand new project with:

$ ionic start ionic2-callnumber sidemenu --v2
$ cd ionic2-callnumber
$ ionic platform add android --save
$ ionic plugin add https://github.com/Rohfosho/CordovaCallNumberPlugin.git

On the web page of this plugin:

https://github.com/Rohfosho/CordovaCallNumberPlugin

they say:

Use the plugin in your JS file:

window.plugins.CallNumber.callNumber(onSuccess, onError, number, bypassAppChooser);

Then I did:

home.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

@Component( {
    selector: 'page-home',
    templateUrl: 'home.html'
})
export class HomePage {

    phone: string;

    constructor( public navCtrl: NavController ) {
        this.phone = "2129442720";
    }

    callNumber() {
        window.plugins.CallNumber.callNumber(
            function( result ) {
                console.log( "Success:" + result );
            },
            function( result ) {
                console.log( "Error:" + result );
            },
            this.phone,
            true
        );
    }
}

home.html

<ion-header>
  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>Home</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <h3>Ionic Menu Starter</h3>

  <p>
    If you get lost, the <a href="http://ionicframework.com/docs/v2">docs</a> will show you the way.
  </p>

  <button ion-button secondary menuToggle>Toggle Menu</button>

  <div>
      <button ion-button secondary (click)="callNumber()">Call Number</button>
      <textarea style="width:100%;height:100px;">{{phone}}</textarea>
  </div>

</ion-content>

but when I do:

$ ionic run android

I get the following error:

My questions are:

[1/2] How can I make use of this plugin on this project?

Here you have a link to this project I created for test:

https://github.com/napolev/ionic2-callnumber

[2/2] Given a Cordova plugin, how do I know the way I need to call the plugin?

For example, for this other plugin: @ionic-native/file-path

https://github.com/hiddentao/cordova-plugin-filepath

The way you use it is as follows:

constructor(
    ...,
    private filePath: FilePath
    ...,
) {
    ...
}

...

this.filePath.resolveNativePath(imagePath).then(imagePath => {
    this.cameraUrl = imagePath;
    this.photoSelected = true;
    this.photoTaken = false;
});

I mean, it is different to the first plugin, where they specify:

window.plugins.CallNumber.callNumber(...);

Answer 1

Ionic has it own implementation of various Cordova plugins, called Ionic Native (you can access through https://ionicframework.com/docs/native .

Given that you can install Ionic Native Call Number plugin with these steps: ionic plugin add --save call-number and npm install --save @ionic-native/call-number

then you can use it by:

import { CallNumber } from '@ionic-native/call-number';

constructor(private callNumber: CallNumber) { }

this.callNumber.callNumber(18001010101, true)
  .then(() => console.log('Launched dialer!'))
  .catch(() => console.log('Error launching dialer'));