无法在 Ionic 3 应用程序中导入 Amplitude SDK

Question

我正在尝试使用 Amplitude SDK 从我的 Ionic 3 应用程序中获取统计信息。但是，由于该应用程序是用 TypeScript 编写的，具有一定的文件架构，因此并不像 official documentation 中那么简单。

但是，我找到了the @types/amplitude-js package，我认为它可以解决我所有的问题。但不幸的是，当我在我的设备上使用 ionic cordova run android --device 编译我的应用程序时，应用程序无法加载并且我收到以下错误消息：

Uncaught Error: Encountered undefined provider! 
Usually this means you have a circular dependencies (might be caused by using 'barrel' index.ts files.

注意：运行ionic serve时也会出现此错误。

这是我做的，一步一步：

• 我通过运行npm install --save @types/amplitude-js 安装了@types/amplitude-js。
• 我通过运行npm install amplitude-js 安装了原始的 Amplitude SDK。我注意到有必要这样做，否则我的应用程序将无法仅使用 @type 包进行编译（这是有道理的）。
• 我在app.module.ts 中添加了以下几行

import { AmplitudeClient } from 'amplitude-js';

[...]
@NgModule({
    [...]
    providers: [
        AmplitudeClient,
        [...]
    ]
});

• 我还创建了一个AmplitudeProvider，它将管理整个应用程序中的所有 Amplitude 事件：

import { Injectable } from '@angular/core';
import { HttpServiceProvider } from "../http-service/http-service";
import { AmplitudeClient } from 'amplitude-js';

/**
 * AmplitudeProvider
 * @description Handles Amplitude statistics
 */
@Injectable()
export class AmplitudeProvider {

  constructor(
    public http: HttpServiceProvider,
    public amplitude: AmplitudeClient
  ) {
    this.amplitude.init("MY_AMPLITUDE_KEY");
  }

  /**
   * logEvent
   * @description Logs an event in Amplitude
   * @param eventTitle Title of the event
   */
  public logEvent(title) {
      // Do things not relevant here
  }
  
}

我确定我的依赖注入和/或导入有问题，但我不明白是什么。而且我没有看到任何循环依赖，因为 amplitude-js 包不是我制作的，也没有导入我的任何提供程序。

在此先感谢任何能给我指明正确方向的人！

Answer 1

AmplitudeClient 不是 Ionic Provider，因此，您不能将其导入并放入您的 Class 构造函数中。

要在您的 Provider 中使用幅度，您需要导入幅度。您的代码应该与此类似。

import amplitude, { AmplitudeClient } from 'amplitude-js';

@Injectable()
export class AmplitudeProvider {

  private client: AmplitudeClient;

  constructor(
    public http: HttpServiceProvider,
    public database: DatabaseProvider
  ) {
    this.client = amplitude.getInstance();
    this.client.init("MY_AMPLITUDE_KEY");
  }
}