Ionic CallNumber Native Cordova plugin not working - Ionic 3, Angular 4

Question

I am aware of the solutions present on Stackoverflow, ionic forums and other places. But none of which work for me when I test on Android and IOS.

https://ionicframework.com/docs/native/call-number/

Let me show you the exact steps I followed :

1) ionic cordova plugin add call-number

2) npm install --save @ionic-native/call-number

3) Add import in app.module.ts import { CallNumber } from '@ionic-native/call-number';

4) Add Provider CallNumber

5) Finally,

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'));

I even tried using async and promise :

  async telephoneCall(): Promise<any>{
    try{
      await this.callNumber.callNumber(String('18001010101'), true);
    }catch(e){
      console.log("User Error: "+ e);
    }
  }

None of the above solutions throw error at compile time or run-time. I am not sure what is wrong. I am using Ionic 3 and Angular 4, someone with the solution for this version of the framework?

updated

{
    "name": "App Name",
    "version": "0.0.1",
    "author": "Murlidhar Fichadia",
    "homepage": "#",
    "private": true,
    "scripts": {
        "clean": "ionic-app-scripts clean",
        "build": "ionic-app-scripts build",
        "lint": "ionic-app-scripts lint",
        "ionic:build": "ionic-app-scripts build",
        "ionic:serve": "ionic-app-scripts serve"
    },
    "dependencies": {
        "@angular/common": "4.4.3",
        "@angular/compiler": "4.4.3",
        "@angular/compiler-cli": "4.4.3",
        "@angular/core": "4.4.3",
        "@angular/forms": "4.4.3",
        "@angular/http": "4.4.3",
        "@angular/platform-browser": "4.4.3",
        "@angular/platform-browser-dynamic": "4.4.3",
        "@ionic-native/call-number": "^4.3.2",
        "@ionic-native/core": "4.3.2",
        "@ionic-native/google-maps": "^4.3.2",
        "@ionic-native/splash-screen": "4.3.2",
        "@ionic-native/status-bar": "4.3.2",
        "@ionic/storage": "2.0.1",
        "call-number": "^1.0.1",
        "cordova-plugin-googlemaps": "^2.0.11",
        "ionic-angular": "3.7.1",
        "ionicons": "3.0.0",
        "rxjs": "5.4.3",
        "sw-toolbox": "3.6.0",
        "zone.js": "0.8.18"
    },
    "devDependencies": {
        "@ionic/app-scripts": "3.0.1",
        "typescript": "2.3.4"
    },
    "description": "App Description",
    "cordova": {
        "plugins": {
            "mx.ferreyra.callnumber": {},
            "cordova-plugin-googlemaps": {}
        }
    }
}

Answer 1

I got it working by simply using

<a href="tel:[phone]">CALL</a>

Just make sure you have below code in config.xml file

<allow-intent href="tel:*" />

Other possible supported href to open links in default browser or an email app or an SMS app:

<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />
<allow-intent href="sms:*" />
<allow-intent href="mailto:*" />
<allow-intent href="geo:*" />

Answer 2

I leave an answer for those who still seek.

First consult this ionic page.

[a link]https://ionicframework.com/docs/native/call-number/[a link]

You will run into a problem of incompatibility in this case if you decide to upgrade your version of angular it will take you a lot of time, otherwise look for a previous version of the API if you encounter problems of compilations of the type isCallSupported () property not found ....

Answer 3

remove mx.ferreyra.callnumber and replace with "call-number" has been known to be a tempory fix

{
    "name": "App Name",
    "version": "0.0.1",
    "author": "Murlidhar Fichadia",
    "homepage": "#",
    "private": true,
    "scripts": {
        "clean": "ionic-app-scripts clean",
        "build": "ionic-app-scripts build",
        "lint": "ionic-app-scripts lint",
        "ionic:build": "ionic-app-scripts build",
        "ionic:serve": "ionic-app-scripts serve"
    },
    "dependencies": {
        "@angular/common": "4.4.3",
        "@angular/compiler": "4.4.3",
        "@angular/compiler-cli": "4.4.3",
        "@angular/core": "4.4.3",
        "@angular/forms": "4.4.3",
        "@angular/http": "4.4.3",
        "@angular/platform-browser": "4.4.3",
        "@angular/platform-browser-dynamic": "4.4.3",
        "@ionic-native/call-number": "^4.3.2",
        "@ionic-native/core": "4.3.2",
        "@ionic-native/google-maps": "^4.3.2",
        "@ionic-native/splash-screen": "4.3.2",
        "@ionic-native/status-bar": "4.3.2",
        "@ionic/storage": "2.0.1",
        "call-number": "^1.0.1",
        "cordova-plugin-googlemaps": "^2.0.11",
        "ionic-angular": "3.7.1",
        "ionicons": "3.0.0",
        "rxjs": "5.4.3",
        "sw-toolbox": "3.6.0",
        "zone.js": "0.8.18"
    },
    "devDependencies": {
        "@ionic/app-scripts": "3.0.1",
        "typescript": "2.3.4"
    },
    "description": "App Description",
    "cordova": {
        "plugins": {
            "call-number": {},
            "cordova-plugin-googlemaps": {}
        }
    }
}