时间戳

首页 > 解决方案 > 未捕获（承诺中）：TypeError: firebase_compat_app__WEBPACK_IMPORTED_MODULE_1__.default.storage is not a function

angular - 未捕获（承诺中）：TypeError: firebase_compat_app__WEBPACK_IMPORTED_MODULE_1__.default.storage is not a function

问题描述

我是初学者...我尝试创建对我的 firebase 数据库的引用以合并照片，但我知道最近 firebase 已经改变了他们的做法。我已阅读此文档：https ://firebase.google.com/docs/storage/web/create-reference#web-version-9但我不知道如何在我的情况下使用它......有人可以在 upLoadFile 方法中帮我解决这个问题？非常感谢您的帮助 ！！

这是我的 service.ts：

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs-compat';
import { Book } from '../models/book.model';
import firebase from 'firebase/compat/app';
import { getStorage, ref } from "firebase/storage";
import "firebase/compat/database";



@Injectable({
  providedIn: 'root'
})
export class BooksService {

  books: Book[] = [];
  booksSubject = new Subject<Book[]>();
  

  constructor() { }

  emitBooks() {
    this.booksSubject.next(this.books);
  }

  saveBooks() {
    firebase.database().ref('/books').set(this.books);
  }

  getBooks() {
    firebase.database().ref('/books')
    .on('value', (data) => {
      this.books = data.val() ? data.val() : [];
      this.emitBooks();
    }); 
  }

  getSingleBook(id: number) {
    return new Promise(
      (resolve, reject) => {
        firebase.database().ref('/books/' + id).once('value').then(
          (data) => {
            resolve(data.val());
          }, (error) => {
            reject(error);
          }
         )
      }
    )
  }
 
  createNewBook(newBook: Book) {
    this.books.push(newBook);
    this.saveBooks();
    this.emitBooks();
  }

  removeBook(book: Book) {
    const bookIndexToRemove = this.books.findIndex(
      (bookEl) => {
        if(bookEl === book) {
          return true;
        } else {
          return ' ';
        }
      }
    );
    this.books.splice(bookIndexToRemove, 1);
    this.saveBooks();
    this.emitBooks();
  }

  uploadFile(file: File) {
    return new Promise(
      (resolve,reject) => {
        const almostUniqueFileName = Date.now().toString();
        **const upload = firebase.storage().ref()
          .child('images/' + almostUniqueFileName + file.name)
          .put(file);**
        upload.on(firebase.storage.TaskEvent.STATE_CHANGED,
          () => {
            console.log('chargement...'); 
          },
          (error) => {
            console.log('Erreur ma couillasse :' + error);
            reject();   
          },
          () => {
            resolve(upload.snapshot.ref.getDownloadURL());
          }
        );
      }
    );
  }
}

标签： angularfirebase

解决方案

您似乎使用的是旧的名称间隔语法，但使用新的模块化/功能语法导入 Firebase 存储。

// Change this
import { getStorage, ref } from "firebase/storage";

// To this
import "firebase/compat/storage"

我建议您查看新的模块化 SDK并升级到它。另请查看此 Firecast以了解有关新 SDK 的更多信息。

推荐阅读