Cannot import Amplitude SDK in a Ionic 3 app

Question

I'm trying to use Amplitude SDK to get statistics from my Ionic 3 app. However, since the app is written in TypeScript with a certain file architecture, it is not as simple as in the official documentation .

However, I found the @types/amplitude-js package and I thought it would resolve all my problems. But unfortunately, when I compile my app on my device using ionic cordova run android --device , the app doesn't load and I get the following error message:

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

Note: this error also appears when I run ionic serve .

Here is what I did, step by step:

• I installed the @types/amplitude-js by running npm install --save @types/amplitude-js .
• I installed the original Amplitude SDK by running npm install amplitude-js . I noticed it was necessary to do that, otherwise my app wouldn't compile with only the @type package (which makes sense).
• I added the following lines to my app.module.ts

 import { AmplitudeClient } from 'amplitude-js'; [...] @NgModule({ [...] providers: [ AmplitudeClient, [...] ] }); 

• I also created an AmplitudeProvider , which will manage all my Amplitude events throughout my app:

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

I'm certain that I'm doing something wrong with my dependency injection and/or my imports, but I don't understand what. And I don't see any circular dependency, since the amplitude-js package is not made by me and does not import any of my providers.

Thanks in advance to anyone who will point me in the right direction!

Answer 1

AmplitudeClient is not a Ionic Provider, therefore, you can't import it and put in your Class constructor.

To use amplitude in your Provider you want to import amplitude. Your code should be similar to this.

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