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

【问题标题】：Encountered undefined provider error while attempting to execute file-transfer in Ionic尝试在 Ionic 中执行文件传输时遇到未定义的提供程序错误
【发布时间】：2018-01-22 17:04:33
【问题描述】：

我正在尝试执行从 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");
      });
  }

}

我在哪里出错了，如何实现文件传输？我认为我在让它工作的正确轨道上——我对打字稿和移动开发很陌生，所以我提前为任何错误道歉。本质上，我想“在应用程序中捕获文件”。

【问题讨论】：

标签： ionic-framework file-transfer

【解决方案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);
      });
  }

请注意，到目前为止，这仅适用于我在移动设备上。

【讨论】：