angular/fire@7 存储不适用于我的 Angular 16 应用程序

Question

我尝试使用 Angular/fire@7 存储来存储文件，但收到此错误：

错误：未捕获（承诺中）：错误：您的 AppModule 中尚未提供 AngularFireModule （这可以手动或隐式使用

provideFirebaseApp）或者您在 NgModule 之外调用 AngularFire 方法（不支持）。

错误：您的 AppModule 中尚未提供 AngularFireModule （这可以手动或隐式使用

provideFirebaseApp）或者您在 NgModule 之外调用 AngularFire 方法（不支持）。

我的app.module.ts：

import { provideFirebaseApp, initializeApp } from '@angular/fire/app';
import { provideStorage, getStorage } from '@angular/fire/storage';

imports: [
  provideFirebaseApp(() => initializeApp(environment.firebaseConfig)),
  provideStorage(() => getStorage()),
]

我的组件：

import { getStorage, ref, uploadBytes, getDownloadURL } from '@angular/fire/storage';

async uploadToFirebase(file: File, folder: string): Promise<string> {
    const storage = getStorage();
    const timestamp = new Date().toISOString().replace(/:/g, '-');
    const storageRef = ref(storage, `${folder}/${file.name}-${timestamp}`);

    await uploadBytes(storageRef, file);
    const downloadURL = await getDownloadURL(storageRef);
    return downloadURL;
}

let imageUrl = '';
if (this.selectedImage) {
    imageUrl = await this.uploadToFirebase(this.selectedImage, 'images');
}

我的 Firebase 存储规则：

rules_version = '2';

// Craft rules based on data in your Firestore database
// allow write: if firestore.get(
//    /databases/(default)/documents/users/$(request.auth.uid)).data.isAdmin;
service firebase.storage {
  match /b/{bucket}/o {
    match /{allPaths=**} {
      allow read, write: if false;
    }
  }

我尝试过使用这些导入

（应用程序模块.ts）

import { AngularFireModule } from '@angular/fire';
import { AngularFireStorageModule } from '@angular/fire/storage';

（组件）

import { AngularFireStorage } from '@angular/fire/storage';

但是由于我使用的是 Angular/fire@7 它给了我这个错误：
模块“@angular/fire/storage”没有导出成员“AngularFireStorage”。

Answer 1

在您的

app.module.ts

中，您尝试将提供者添加到

imports

数组中，但您需要将其添加到

providers

数组中：

providers: [
  provideFirebaseApp(() => initializeApp(environment.firebaseConfig)),
  provideStorage(() => getStorage()),
]