Ionic3从Flask服务器传输.vcf文件时遇未定义提供者错误求助

首先，咱们先搞定你遇到的「Encountered undefined provider!」错误——这是因为你把TransferObject加到了组件的providers数组里，但它并不是一个可以被Angular注入的服务，而是通过Transfer.create()方法生成的实例对象，根本不需要在providers里声明。这是最核心的错误点。

接下来咱们一步步拆解问题，给出两种实现方案（一种是修正你原有的file-transfer方式，另一种是更贴合你需求的轻量方案）：

一、先修正你原有的file-transfer代码 #

1. 修复Provider错误 #

把组件装饰器里的TransferObject从providers中移除：

@Component({
  selector: 'page-quiz',
  templateUrl: 'quiz.html',
  providers: [Transfer, File] // 删掉TransferObject
})

2. 修正路径与未定义的Alert #

• 你用的applicationDirectory是应用的安装目录，属于只读路径，根本没法写入文件，换成缓存目录cacheDirectory（符合你无需持久化的需求，系统会自动清理）。
• 代码里的alertSuccess没定义，需要先通过AlertController创建：

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, AlertController } from 'ionic-angular'; // 导入AlertController
import { Transfer, TransferObject } from '@ionic-native/file-transfer';
import { File } from '@ionic-native/file';

@IonicPage()
@Component({
  selector: 'page-quiz',
  templateUrl: 'quiz.html',
  providers: [Transfer, File]
})
export class QuizPage {
  storageDirectory: string = '';
  vCardContent: string = ''; // 用来存vcf内容，方便页面展示

  constructor(
    public navCtrl: NavController, 
    public navParams: NavParams, 
    private transfer: Transfer, 
    private file: File,
    private alertCtrl: AlertController // 注入AlertController
  ) {
    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;
    // 换成可写的缓存目录，加上.vcf后缀方便识别
    const downloadPath = this.file.cacheDirectory + `${uuid}.vcf`;

    // 创建成功提示框
    const alertSuccess = this.alertCtrl.create({
      title: '下载完成',
      message: '已获取vCard内容',
      buttons: ['确定']
    });

    fileTransfer.download(vCardLocation, downloadPath).then((entry) => {
      console.log("文件下载完成", entry.toURL());
      // 读取文件内容用于展示
      this.file.readAsText(entry.nativeURL).then(content => {
        this.vCardContent = content; // 把内容赋值给变量，页面上可以用{{vCardContent}}展示
        console.log('vCard内容:', content);
      }).catch(err => {
        console.log('读取文件失败:', err);
      });
      alertSuccess.present();
    }, (error) => {
      console.log("文件下载失败", error);
      const alertError = this.alertCtrl.create({
        title: '下载失败',
        message: '无法获取vCard文件',
        buttons: ['确定']
      });
      alertError.present();
    });
  }
}

二、更贴合你需求的轻量方案（推荐） #

你的需求是「仅读取展示，无需持久化」，其实完全没必要下载文件到本地，直接用HttpClient请求获取vcf的文本内容即可，省去文件操作的麻烦：

1. 导入并配置HttpClient #

首先在app.module.ts里全局导入HttpClientModule：

import { HttpClientModule } from '@angular/common/http';

@NgModule({
  imports: [
    // ...其他导入项
    HttpClientModule
  ]
})
export class AppModule {}

2. 修改QuizPage代码 #

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, AlertController } from 'ionic-angular';
import { HttpClient } from '@angular/common/http'; // 导入HttpClient

@IonicPage()
@Component({
  selector: 'page-quiz',
  templateUrl: 'quiz.html'
})
export class QuizPage {
  vCardContent: string = '';

  constructor(
    public navCtrl: NavController, 
    public navParams: NavParams, 
    private http: HttpClient,
    private alertCtrl: AlertController
  ) {
    this.getVCardContent("b734cdc8-8ec1-4fde-b918-b6062b5099df");
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad QuizPage');
  }

  getVCardContent(uuid) {
    const vCardUrl = `http://xxxxxxx.xxx.edu:5000/get_question_vCard?uuid=${uuid}`;
    // 以文本形式请求内容
    this.http.get(vCardUrl, { responseType: 'text' }).subscribe(
      content => {
        this.vCardContent = content;
        console.log('vCard内容:', content);
      },
      error => {
        console.log('获取vCard失败:', error);
        const alertError = this.alertCtrl.create({
          title: '获取失败',
          message: '无法获取vCard内容',
          buttons: ['确定']
        });
        alertError.present();
      }
    );
  }
}

最后在你的quiz.html页面里，直接用插值表达式展示内容即可：

<ion-content padding>
  <h3>vCard内容</h3>
  <pre>{{vCardContent}}</pre>
</ion-content>

额外注意事项 #

• 如果你坚持用file-transfer，要确保已经安装了对应插件：

  ionic cordova plugin add cordova-plugin-file-transfer
  npm install @ionic-native/file-transfer
  ionic cordova plugin add cordova-plugin-file
  npm install @ionic-native/file
  

• 测试时记得用真机或模拟器，部分cordova插件在浏览器环境下无法正常工作。

内容的提问来源于stack exchange，提问作者peachykeen