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

}

我哪里错了，如何实现文件传输？我认为我在让它工作的正确轨道上——我是打字稿和移动开发的新手，所以我提前为任何错误道歉。本质上我想 "capture the file within the application."

Answer 1

原来我有两个错误。首先，我的导入语句是错误的。其次，我没有将某些导入添加到我的 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);
      });
  }

请注意，到目前为止这只对我在移动设备上有效。

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

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

file-transfer

ionic-framework