Ionic 5 Cordova 插件 EmailComposer NullInjectorError答案

【问题标题】：Ionic 5 Cordova Plugin EmailComposer NullInjectorErrorIonic 5 Cordova 插件 EmailComposer NullInjectorError
【发布时间】：2021-01-01 17:21:11
【问题描述】：

我正在使用 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.');
    }
  }
}

控制台错误：

错误错误：未捕获（承诺）：NullInjectorError： R3InjectorError(ContentModule)[EmailService -> EmailComposer -> EmailComposer -> EmailComposer -> EmailComposer]:
NullInjectorError: 没有 EmailComposer 的提供者！ NullInjector错误： R3InjectorError(ContentModule)[EmailService -> EmailComposer -> EmailComposer -> 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 ERROR 错误：未捕获（承诺中）：错误：无效 NgModule 'SharedModule' 的提供者 - 仅提供者的实例和类型是允许的，得到：[..., ..., ..., ..., ..., ?[object Object]?] 错误：NgModule 'SharedModule' 的提供程序无效 - 只允许 Provider 和 Type 的实例，得到：[..., ..., ..., ..., ..., ?[object 对象]?]

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

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

【问题讨论】：

标签： ionic-framework cordova-plugins ionic-native capacitor

【解决方案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 {}

【讨论】：

感谢您帮助我。可悲的是，我收到了同样的错误：only instances of Provider and Type are allowed.
我没有收到任何错误，我已尝试使用 Ionic-5 检查此链接 ionic-5-email-composer.stackblitz.io。请在设备中尝试此代码（在浏览器中显示错误“cordova_not_available”）
我遇到了同样的错误，我已经尝试了一切。我没主意了。显然，我不需要在 AppModule 中声明 Email Composer。我们可以在任何其他模块上做到这一点。我仍在寻找这个问题以及如何解决它。

【解决方案2】：

添加 useClass with provide

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

...
...
...

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

【讨论】：

【解决方案3】：

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

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

对此：（注意'/ngx'）

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

【讨论】：

感谢您的指正，我已经更新了我的答案。