Ionic 5 Cordova Plugin EmailComposer NullInjectorError - ionic-framework

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

Add EmailComposer in AppModule's provider
import {EmailComposer} from "#ionic-native/email-composer/ngx";
#NgModule({
declarations: [AppComponent ],
imports: [
BrowserModule,
IonicModule.forRoot(),
AppRoutingModule,
],
providers: [
...
EmailComposer
],
bootstrap: [AppComponent]
})
export class AppModule {}

Answer 2

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";

Answer 3

Add useClass with provide
import {EmailComposer} from "#ionic-native/email-composer";
import { IonicNativePlugin } from '#ionic-native/core';
...
...
...
providers: [
...
{ provide: EmailComposer, useClass: IonicNativePlugin}
]