Angular 16使用angular/fire@7 Storage报错的问题求助

报错信息 #

Error: Uncaught (in promise): Error: Either AngularFireModule has not been provided in your AppModule (this can be done manually or implictly using provideFirebaseApp) or you're calling an AngularFire method outside of an NgModule (which is not supported).
Error: Either AngularFireModule has not been provided in your AppModule (this can be done manually or implictly using provideFirebaseApp) or you're calling an AngularFire method outside of an NgModule (which is not supported).

当前代码配置 #

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 Storage 规则 #

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;
    }
  }
}

尝试过的方案及新报错 #

尝试使用旧版AngularFire的导入方式：

修改后的app.module.ts #

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

修改后的组件导入 #

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

但因使用的是angular/fire@7，出现新错误：

Module "@angular/fire/storage" has no exported member 'AngularFireStorage'.

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