angular/fire@7 storage is not working for my Angular 16 app

I’m trying to use angular/fire@7 storage to store files and I’m getting this error:

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).

my app.module.ts:

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

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

my component:

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

my firebase storage rules:

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

I’ve tried using these imports

(app.module.ts)

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

(component)

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

but since I’m using angular/fire@7 it gives me this error:
Module ‘"@angular/fire/storage"’ has no exported member ‘AngularFireStorage’.

You need to sign in to view this answers