离子5 Cordova插件EmailComposer NullInjectorError

Question

我正在做一个应用程序使用Ionic 5和电容。

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

我已经安装了插件电子邮件编写器打开用户的电子邮件客户端发送电子邮件。

安装电容器：

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

我创建了一个服务来实现发送电子邮件的逻辑：

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

控制台中的错误：

错误:未知(承诺)：NullInjectorError: R3InjectorError(ContentModule)EmailService -> EmailComposer -> EmailComposer： NullInjectorError:没有EmailComposer的提供者！NullInjectorError: R3InjectorError(ContentModule)EmailService -> EmailComposer -> EmailComposer： NullInjectorError:没有EmailComposer的提供者！

看到这个之后，我把它添加到了我的ngModule上：

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

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

现在，我在控制台中收到了这个错误：

core.js:6228错误: Uncaught (承诺)：Error: NgModule 'SharedModule‘的无效提供程序-只允许提供程序和类型的实例，got：[.，.，？SharedModule对象？]错误: NgModule 'SharedModule‘的无效提供程序-只允许提供程序和类型的实例，got：[.，?object对象？]

知道我该怎么解决这个问题吗？

我的目标是在我的项目中正确地安装和实现插件EmailComposer。

Answer 1

若要添加到上面Praveen Patel的答案，请尝试将导入代码更改为

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

对此：(注意'/ngx')

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

Answer 2

在AppModule的提供程序中添加EmailComposer

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

@NgModule({
  declarations: [AppComponent ],
  imports: [
    BrowserModule, 
    IonicModule.forRoot(), 
    AppRoutingModule,
  ],
  providers: [
    ...
    EmailComposer 
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

Answer 3

添加useClass并提供

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

...
...
...

providers: [
...
{ provide: EmailComposer, useClass: IonicNativePlugin}
]