Ionic - Uncaught (in promise): TypeError: Cannot read property 'then' of undefined

Issue

I got this error during runtime of my Ionic Application. I was trying to implement the Ionic "Email Composer" library to send emails from the client side, please reference this link to learn about the code that I am following; https://ionicframework.com/docs/native/email-composer. The flow of the error was when I was testing the application I hit a button that triggers the "LoadingDialog" function this function triggers the "SendEmail" function which is where the error occurs. I am not sure how to fix this error, but I think it has to do with the syntax of a promise that I don't understand yet. Thank you for any help you can provide!

Lines of code that appear in the error

this.emailComposer.isAvailable().then((available: boolean) =>{ //<<<<<<<< THIS IS LINE 221 IN home.page.ts file and it appears in the error

this.SendEmail(); //<<<<<<<< THIS IS LINE 109 IN home.page.ts file

Error

ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'then' of undefined   TypeError: Cannot read property 'then' of undefined
     at HomePage.SendEmail (home.page.ts:221)
     at HomePage.<anonymous> (home.page.ts:109)
     at Generator.next (<anonymous>)
     at fulfilled (tslib.es6.js:70)
     at ZoneDelegate.invoke (zone-evergreen.js:359)
     at Object.onInvoke (core.js:34201)
     at ZoneDelegate.invoke (zone-evergreen.js:358)
     at Zone.run (zone-evergreen.js:124)
     at zone-evergreen.js:855
     at ZoneDelegate.invokeTask (zone-evergreen.js:391)
     at resolvePromise (zone-evergreen.js:797)
     at zone-evergreen.js:707
     at fulfilled (tslib.es6.js:70)
     at ZoneDelegate.invoke (zone-evergreen.js:359)
     at Object.onInvoke (core.js:34201)
     at ZoneDelegate.invoke (zone-evergreen.js:358)
     at Zone.run (zone-evergreen.js:124)
     at zone-evergreen.js:855
     at ZoneDelegate.invokeTask (zone-evergreen.js:391)
     at Object.onInvokeTask (core.js:34182)

Code (home.page.ts)

            import { EmailComposer } from '@ionic-native/email-composer/ngx';
    
            export class HomePage {
    
            constructor(private http: Http, public loadingController: LoadingController,
                    public alertController: AlertController, 
                    private emailComposer: EmailComposer) {
           //constructor
            }
        async LoadingDialog(httpformdata) {//loading circle symbol
            const loading = await this.loadingController.create({
                message: 'Please wait...',
                duration: null
            });
            this.loading = loading;
            this.loading.present();
            console.log('ion dialog created.');
            /***  SendEmail  ***/
            this.SendEmail(); //<<<<<<<< THIS IS LINE 109 IN home.page.ts file
            /***  GET REQUEST  ***/
            this.GET_request(httpformdata);
            /***  POST REQUEST  ***/
            //this.POST_request(httpformdata);
            console.log('request made in async.');
            
            //this.loading.dismiss();
            //console.log('ion dialog dismissed.');
    
            const { role, data } = await loading.onDidDismiss();
    
            console.log('Loading dismissed!');
        }
            async RegularAlert(the_header: String, the_message: String) {//customized alert() dialog
            const alert = await this.alertController.create({
                header: '' + the_header,
                message: '' + the_message,
                buttons: ['OK']
            });
            await alert.present();
            return alert.getAttribute("header");
        }
    
        SendEmail(){
                this.emailComposer.isAvailable().then((available: boolean) =>{  //<<<<<<<< THIS IS LINE 221 IN home.page.ts file
                    if(available) {
                    //Now we know we can send
                    this.RegularAlert("testing the isAvailable().then", "available is true");//print a debug message to test functionality of   
    
                    let email = {
                        to:'[email protected]',
                        cc: '[email protected]',
                        bcc: [],
                        attachments: [],
                        subject: 'Cordova Icons',
                        body: 'How are you? Nice greetings from Leipzig',
                        isHtml: false
                      }
                    
                      // Send a text message using default options
                      this.emailComposer.open(email);
                    }
                    else{
                        this.RegularAlert("testing the isAvailable().then", "available is false");
                    }
                });
            
        } 
    
    }

Solution

This error occurred because I did not run the app in the emulator or on a Android phone, since the Cordova library only runs with Mobile OS's like Android OS, so the this.emailComposer.isAvailable() was undefined instead of returning a promise. The minimum that you need is:

if (this.platform.is('cordova')){ //run your email composer code here }

This code worked for me after I ran the code on a android phone:

if (this.platform.is('cordova')){//use cordova for android,iOS,Windows-Mobile,etc
                this.emailComposer.isAvailable().then((available: 
                   boolean) =>{
                                //CODE HERE
                  
                            });
}else{
      console.log("Platform is not cordova/mobile","You are running in browser, this.emailComposer.isAvailable() is undefined.");
}

Here is the source code for the email composer: https://ionicframework.com/docs/native/email-composer

Answered By - Computer Science