打字稿中的错误：“AngularFireStorageModule”类型上不存在属性 .ref

Posted 2023-03-13

【中文标题】打字稿中的错误：“AngularFireStorageModule”类型上不存在属性 .ref

【英文标题】：Error in typescript: property .ref does not exist on type 'AngularFireStorageModule'

【发布时间】：2018-10-19 15:09:31

【问题描述】：

我正在尝试使用 Ionic 中的 AngularFire 将图像上传到 firebase，但我不断收到错误 'Property '.ref' does not exist on type 'AngularFireStorageModule'.'。

进口：

import  AngularFireAuth  from 'angularfire2/auth';
import  AngularFirestore, AngularFirestoreCollection  from 'angularfire2/firestore';
import  AngularFireStorageModule  from 'angularfire2/storage';

import * as firebase from 'firebase/app';
import  enableLogging  from '@firebase/database-types';

.ref 错误

 for(var i = 0; i < this.imagePaths.length; i++)
    console.log("Adding photo's" + this.imagePaths[i]);
        const filePath = 'images/' + this.docRef + '/';
        const ref = this.storage.ref(filePath);
        const task = ref.put(this.imagePaths[i]).then((snapshot) => 
          console.log('Uploaded an image!');
        );
   

错误发生在const ref = this.storage.ref(filePath);这一行

有人知道为什么这不起作用吗？我在网上搜索，但所有的教程都和我一样。

【问题讨论】：

你在哪里声明了 this.storage？

在我的构造函数中：构造函数(public navCtrl: NavController, public afAuth: AngularFireAuth, public alertCtrl: AlertController, public navParam: NavParams, public imagePicker: ImagePicker, public addHouseObject: AddHouseService, public afs: AngularFirestore, public userService: UserService, public datePipe: DatePipe, public storage: AngularFireStorageModule)

我认为您错误地将模块实例注入到您的组件中。您应该导入 AngularFireStorage 而不是 AngularFireStorageModule，同时更改构造函数参数类型。

是的，就是这样，我输入了错误的类型。谢谢！ @DanielWSrimpel

【参考方案1】：

import  AngularFireStorage  from 'angularfire2/storage';
constructor(private storage: AngularFireStorage)

uploadFile(file)
  const filePath = 'images/' + this.docRef + '/';
  const task = this.storage.upload(filePath, file);

  task.percentageChanges().subscribe(per => 
    console.log(per);
  );

  task.downloadURL().subscribe(url => 
    console.log(url);
  

来源AngularFire2 Docs