Encountered undefined provider error while attempting to execute file-transfer in Ionic - ionic-framework

Question

I am trying to execute file transfer from a Flask server to an Ionic3 application. Basically, what I want to do is send a .vcf file from the server to the application to them be read and displayed in the application. The application does not need to store the file in any form of persistent memory.
When I try to do this, I get a ton of error. The one I am encountering right now is:
Encountered undefined provider! Usually this means you have circular dependencies (might be caused by using 'barrel' index.ts files.
I tried making a whole separate provider file for file-transfer but that just gave me other errors. Currently, my .ts file that is throwing the error is as follows:
import { Component } from '#angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { Transfer, TransferObject } from '#ionic-native/file-transfer';
import { File } from '#ionic-native/file';
#IonicPage()
#Component({
selector: 'page-quiz',
templateUrl: 'quiz.html',
providers: [Transfer, TransferObject, File]
})
export class QuizPage {
storageDirectory: string = '';
constructor(public navCtrl: NavController, public navParams: NavParams,
private transfer: FileTransfer, private file: File) {
this.vCardDownload("b734cdc8-8ec1-4fde-b918-b6062b5099df");
}
ionViewDidLoad() {
console.log('ionViewDidLoad QuizPage');
}
vCardDownload(uuid) {
const fileTransfer: TransferObject = this.transfer.create();
const vCardLocation = 'http://xxxxxxx.xxx.edu:5000/get_question_vCard?uuid=' + uuid;
fileTransfer.download(vCardLocation, this.file.applicationDirectory + uuid).then((entry) => {
console.log("file was downloaded", entry.toURL());
alertSuccess.present();
}, (error) => {
console.log("ERROR file was not downloaded");
});
}
}
Where am I going wrong here and how can I achieve file transfer? I think I am on the right track to getting it working -- I am pretty new to typescript and mobile development so I apologize in advance for any mistakes. Essentially I want to "capture the file within the application."

Answer 1

It turns out I had two errors. First, my import statements were wrong. Second, I didn't add certain imports to the providers listing in my app.module.ts file.
Here are my providers in app.module.ts:
import { File } from '#ionic-native/file';
import { FileTransfer } from '#ionic-native/file-transfer';
... declarations, imports, etc. ...
providers: [
StatusBar,
SplashScreen,
File,
FileTransfer,
{provide: ErrorHandler, useClass: IonicErrorHandler}
]
Here is the sample code I used to download the .vcf file.
import { FileTransfer, FileTransferObject } from '#ionic-native/file-transfer';
import { File } from '#ionic-native/file';
...
constructor(public navCtrl: NavController, public navParams: NavParams,
private transfer: FileTransfer, private file: File) {
this.vCardDownload("XXXXXX-XXXXX-XXXX-XXXX");
}
...
vCardDownload(uuid) {
console.log("Trying to download vCard!");
const fileTransfer: FileTransferObject = this.transfer.create();
const vCardLocation = 'http://XXXXXX.XXX.edu:5000/get_question_vCard?uuid=' + uuid;
fileTransfer.download(vCardLocation, this.file.dataDirectory + 'file.vcf').then((entry) => {
console.log('download complete: ' + entry.toURL());
}, (error) => {
console.error(error);
});
}
Note that so far this only works for me on a mobile device.