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

Posted 2023-03-13

【中文标题】无法在 Ionic 3 应用程序中导入 Amplitude SDK

【英文标题】：Cannot import Amplitude SDK in a Ionic 3 app

【发布时间】：2019-09-11 19:52:05

【问题描述】：

我正在尝试使用 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 包不是我制作的，也没有导入我的任何提供程序。

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

【参考方案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");
  

【讨论】：

这就是解决方案，我不知道它不是 Ionic Provider。谢谢@ImOverlord！