R3InjectorError(Standalone[_ProfilePageComponent])[_AngularFireStorage -> InjectionToken angularfire2.app.options -> InjectionToken angularfire2.app.options -> InjectionToken angularfire2.app.options

Hi I’m building an Angular App and wanted to uitilize Firebase’s storage. I am running into an error when trying to inject AngularFireStorage inside my component. I am using Angular17 and firebase 10.11.0. Below is my code

core.mjs:11809 ERROR NullInjectorError: R3InjectorError(Standalone[_ProfilePageComponent])[_AngularFireStorage -> InjectionToken angularfire2.app.options -> InjectionToken angularfire2.app.options -> InjectionToken angularfire2.app.options -> InjectionToken angularfire2.app.options]: 

NullInjectorError: No provider for InjectionToken angularfire2.app.options!

My app.config.ts file

import { ApplicationConfig, importProvidersFrom } from '@angular/core';
import { provideRouter } from '@angular/router';
import { routes } from './app.routes';
import { provideClientHydration } from '@angular/platform-browser';
import { provideAnimations } from '@angular/platform-browser/animations';
import { provideFirebaseApp } from '@angular/fire/app';
import { provideAuth } from '@angular/fire/auth';
import { provideFirestore } from '@angular/fire/firestore';
import { provideStorage } from '@angular/fire/storage';
import { provideHttpClient } from '@angular/common/http';
import { app, auth, storage } from './firebase.config';
import { getFirestore } from 'firebase/firestore';
import { HttpClientModule } from '@angular/common/http';

// `appConfig.ts` with providers for the Firebase app and services
export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes),
    provideClientHydration(),
    provideHttpClient(),
    provideAnimations(),
    importProvidersFrom([
      provideFirebaseApp(() => app),
      provideAuth(() => auth),
      provideFirestore(() => getFirestore(app)),
      provideStorage(() => storage),
    ]),
  ],
};

My firebase.config.ts file. I X’d the config information.

import { initializeApp } from 'firebase/app';
import { getAnalytics } from 'firebase/analytics';
import { getAuth } from 'firebase/auth';
import 'firebase/auth';
import 'firebase/database';
import 'firebase/storage';
import { getStorage } from 'firebase/storage';


export const firebaseConfig = {
  apiKey: 'X',
  authDomain: 'X',
  projectId: 'X',
  storageBucket: 'X',
  messagingSenderId: 'X',
  appId: 'X',
  measurementId: 'X',
};



export const app = initializeApp(firebaseConfig);

export const auth = getAuth(app);
export const storage = getStorage(app);

My component where I want to use Firebase Storage

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

// left out other parts of code that is irrelevant to this problem.

@Component({
  selector: 'app-driver-profile',
  standalone: true,
  imports: [
    CommonModule,
    FormsModule,
  ],

  templateUrl: './driver-profile.component.html',
  styleUrl: './driver-profile.component.css',
})
export class DriverProfileComponent implements OnInit {
  constructor(
    private storage: AngularFireStorage,
    private cdr: ChangeDetectorRef
  ) {}

Everytime i render this component, I get the exact same error to appear.

I’ve tried looking at other older forums post. Some of the posts said to use try injecting FirebaseStorage module, FirebaseModule, etc which didnt work.

I’ve tried changing import providers to the following below

 importProvidersFrom([
      provideFirebaseApp(() => initializeApp(environment.firebaseConfig)),
      provideAuth(() => getAuth()),
      provideFirestore(() => getFirestore()),
      provideStorage(() => getStorage())
    ]),

and well as initializing the firebase app in my firebase.config.ts (what i have now)

I’ve tried importing AngularFireStorage from @angular/fire/storage, yet everytime i tried doing it I would get,
“angular/fire/storage” has no export named “AngularFireStorage.

so that led me to use {AngularFireStorage} from ‘@angular/fire/compat/storage’.

I was thinking once i was able to get the providers in my App.config.ts, that I would be able to use the storage in the component I want. I was able to get the Firebase authentication to work.

At this point, i’m really lost on what to do next. Any guidance would be greatly appreciated! Thank you in advance!