R3InjectorError while integrating Firebase storage in Angular 17 application

Question

I am new to Angular. I am trying to integrate Firebase storage to upload multiple images selected by user using Angular/Fire with Angular 17. But on opening the component, I get the following error in console

 core.mjs:7494 ERROR NullInjectorError: R3InjectorError(Standalone[_ProductComponent])[_UploadService -> _UploadService -> _UploadService -> _AngularFireStorage -> InjectionToken angularfire2.app.options -> InjectionToken angularfire2.app.options]: 
  NullInjectorError: No provider for InjectionToken angularfire2.app.options!
    at NullInjector.get (core.mjs:4685:27)
    at R3Injector.get (core.mjs:5130:33)
    at R3Injector.get (core.mjs:5130:33)
    at injectInjectorOnly (core.mjs:3842:40)
    at ɵɵinject (core.mjs:3848:42)
    at Object.AngularFireStorage_Factory [as factory] (angular-fire-compat-storage.mjs:135:45)
    at core.mjs:5256:47
    at runInInjectorProfilerContext (core.mjs:3655:9)
    at R3Injector.hydrate (core.mjs:5255:21)
    at R3Injector.get (core.mjs:5119:33)

Here is the Upload service:

    import { Injectable } from '@angular/core';

import { AngularFireStorage } from '@angular/fire/compat/storage';
import { Observable, forkJoin } from 'rxjs';
import { finalize, map } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class UploadService {
  private basePath = '/uploads';
  imageUrls:string[]=[];
  constructor(private storage: AngularFireStorage) { }

  uploadFiles(files: File[]): Observable<(number | undefined)[]> {
    const uploadObservables: Observable<number|undefined>[] = [];

    files.forEach(file => {
      const uploadTask = this.uploadFile(file);
      uploadObservables.push(uploadTask);
    });

    return forkJoin(uploadObservables);
  }
  uploadFile(file:File): Observable<number | undefined> {
    const filePath = `${this.basePath}/${file.name}`;
    const storageRef = this.storage.ref(filePath);
    const uploadTask = this.storage.upload(filePath, file);

    uploadTask.snapshotChanges().pipe(
      finalize(() => {
        storageRef.getDownloadURL().subscribe((downloadURL: string) => {
         const url = downloadURL;
          //fileUpload.name = fileUpload.file.name;
          this.saveFileData(downloadURL);
        });
      })
    ).subscribe();

    return uploadTask.percentageChanges();
  }

  private saveFileData(imageUrl:string): void {
    //this.db.list(this.basePath).push(fileUpload);
    this.imageUrls.push(imageUrl);
  }

Also here are the providers provided in app.config.ts

    import { ApplicationConfig, importProvidersFrom } from '@angular/core';
import { provideRouter } from '@angular/router';
import { routes } from './app.routes';
import { provideHttpClient, withFetch } from '@angular/common/http';
import { firebaseConfig } from './firebase';
import { initializeApp } from 'firebase/app';
import { provideFirebaseApp } from '@angular/fire/app';

import { getStorage,provideStorage } from '@angular/fire/storage';
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
import { FileDragNDropDirective } from './shared/directives/file-drag-ndrop.directive';
import { UploadService } from './shared/services/upload.service';


export const appConfig: ApplicationConfig = {
  providers: [provideRouter(routes),provideHttpClient(withFetch()),importProvidersFrom(FontAwesomeModule),
    importProvidersFrom([
      provideFirebaseApp(() => initializeApp(firebaseConfig)),
      provideStorage(() => getStorage()),
      
    ],
    
    ),
    FileDragNDropDirective
  ]
};

I am trying to create a functionality that will enable user to pick multiple files . All the files are uploaded simultaneously on click of a button and there progress is returned as observable. Also all the download URLs are stored in an array.

Where is the issue and what am I doing wrong here ?