ERROR TypeError: Cannot read property 'then' of undefined while saving contact in IONIC 4

Question

I want to save the contact to my phone book.
I followed the instructions at https://ionicframework.com/docs/native/contacts

detail.html

<div class="call">
     <ion-buttons slot="primary">
         <ion-button size="small" (click)="save(memberData.contact_no,memberData.fname,memberData.lname)">
              Save Contact
              <ion-icon slot="end" name="phone-portrait"></ion-icon>
         </ion-button>
     </ion-buttons>
</div>

detail.ts

import { Contacts, Contact, ContactField, ContactName } from '@ionic-native/contacts/ngx';

constructor(private contacts: Contacts) { }

save(number: string, firstName: string, lastName: string) {
    // alert(number + " " + firstName + " " + lastName);

    let contact: Contact = this.contacts.create();

    contact.name = new ContactName(null, firstName, lastName);
    contact.phoneNumbers = [new ContactField('mobile', number)];
    contact.save()
    .then(() => console.log('Contact saved!', contact),
      (error: any) => console.error('Error saving contact.', error))
    .catch(err => console.log('Catch : Error saving contact', err));
  } 

Error

common.js:290 Native: tried calling Contacts.create, but Cordova is not available. Make sure to include cordova.js or run in a device/simulator

MemberDetailPage.html:17 ERROR TypeError: Cannot read property 'then' of undefined

Answer 1

You are getting this error while testing inside the browser. Try launching an android studio version of your app for Android or inside Xcode for iOS to see if the plugin works.

If you're trying to test cordova plugins in the browser alone maybe this could help https://learn.microsoft.com/en-us/visualstudio/cross-platform/tools-for-cordova/first-steps/simulate-in-browser?view=toolsforcordova-2017.

In general always use a real device or an emulator for testing native capabilities.