Ionic 5 Cordova 插件 EmailComposer NullInjectorError

Question

我正在使用 Ionic 5 和 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"
  }

我已经安装插件Email Composer打开用户的邮件客户端发送邮件

安装电容器：

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

控制台错误：

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!

看到这个后，我把它添加到我的 ngModule 中：

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

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

现在我在控制台中收到此错误：

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]?]

知道如何解决这个问题吗？

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

Answer 1

在 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 2

添加 useClass 和 provide

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

...
...
...

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

Answer 3

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

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

为此：（注意 '/ngx'）

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

Ionic 5 Cordova 插件 EmailComposer NullInjectorError

Ionic 5 Cordova Plugin EmailComposer NullInjectorError

ionic-framework

cordova-plugins

ionic-native

capacitor