尝试在Ionic中执行文件传输时遇到未定义的提供程序错误

Question

我正在尝试执行从Flask服务器到Ionic3应用程序的文件传输。基本上，我想做的是从服务器向应用程序发送一个.vcf文件，以便在应用程序中读取和显示。应用程序不需要将文件存储在任何形式的永久存储器中。

当我尝试这样做的时候，我得到了大量的错误。我现在遇到的问题是：

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

我尝试为file-transfer创建一个完整的提供程序文件，但这只会给我带来其他错误。目前，我抛出错误的.ts文件如下：

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

}

在这里我哪里出错了，我如何实现文件传输？我想我是在正确的轨道上让它工作--我对typescript和移动开发非常陌生，所以我提前为任何错误道歉。从本质上讲，我希望“捕获应用程序中的文件”。

Answer 1

事实证明我有两个错误。首先，我的import语句是错误的。其次，我没有将某些导入添加到app.module.ts文件中列出的提供程序中。

下面是我在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}
]

下面是我用来下载.vcf文件的示例代码。

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

请注意，到目前为止，这只适用于我的移动设备。