Ionic 5 Cordova Plugin EmailComposer NullInjectorError

Question

I'm doing an App using Ionic 5 and Capacitor.

package.json

"dependencies": {
    "@angular/common": "~9.1.6",
    "@angular/core": "~9.1.6",
    "@angular/fire": "^6.0.2",
    "@angular/forms": "~9.1.6",
    "@angular/platform-browser": "~9.1.6",
    "@angular/platform-browser-dynamic": "~9.1.6",
    "@angular/router": "~9.1.6",
    "@capacitor/android": "^2.4.0",
    "@capacitor/core": "^2.4.0",
    "@capacitor/ios": "^2.4.0",
    "@ionic-native/core": "^5.27.0",
    "@ionic-native/email-composer": "^5.28.0",
    "@ionic/angular": "^5.2.3",
    "cordova-plugin-email-composer": "^0.9.2",
    "rxjs": "~6.5.1",
    "tslib": "^1.10.0",
    "zone.js": "~0.10.2"
  }

I have installed the plugin Email Composer to open the email client of the user to send an email.

Installation with Capacitor:

npm install cordova-plugin-email-composer
npm install @ionic-native/email-composer
ionic cap sync

I have created a service to implement the logic of sending emails:

import {Injectable} from '@angular/core';
import {EmailComposer, EmailComposerOptions} from "@ionic-native/email-composer/ngx";

@Injectable()
export class EmailService {

  constructor(
    private emailComposer: EmailComposer
  ) {
  }

  private get isEmailClientConfigured(): Promise<boolean> {
    return this.emailComposer.isAvailable();
  }

  /**
   * Tries to open an email client and populate the fields.
   */
  intentToSend(to: string) {
    if (this.isEmailClientConfigured) {
      const email: EmailComposerOptions = {
        to: to,
        isHtml: false
      };
      this.emailComposer.open(email);
    } else {
      console.log('Could not find an email configured.');
    }
  }
}

Error in console:

ERROR Error: Uncaught (in promise): NullInjectorError: R3InjectorError(ContentModule)[EmailService -> EmailComposer -> EmailComposer -> EmailComposer -> EmailComposer]:
NullInjectorError: No provider for EmailComposer! NullInjectorError: R3InjectorError(ContentModule)[EmailService -> EmailComposer -> EmailComposer -> EmailComposer -> EmailComposer]:
NullInjectorError: No provider for EmailComposer!

After seeing this, I have added it on my ngModule:

import {NgModule} from '@angular/core';
import {EmailComposer} from "@ionic-native/email-composer";

@NgModule({
  declarations: [
  ],
  imports: [
  ],
  providers: [
    EmailComposer
  ]
})
export class SharedModule {
}

Now I receive this error in console:

core.js:6228 ERROR Error: Uncaught (in promise): Error: Invalid provider for the NgModule 'SharedModule' - only instances of Provider and Type are allowed, got: [..., ..., ..., ..., ..., ?[object Object]?] Error: Invalid provider for the NgModule 'SharedModule' - only instances of Provider and Type are allowed, got: [..., ..., ..., ..., ..., ?[object Object]?]

Any idea how can I fix this?

My goal is to install and implement the plugin EmailComposer correctly on my project.

Answer 1

To add onto the answer of Praveen Patel above, try changing the import code from

import {EmailComposer} from "@ionic-native/email-composer";

to this: (note the '/ngx')

import {EmailComposer} from "@ionic-native/email-composer/ngx";