core.mjs:11751 ERROR Error: NG0203: inject() must be called from an injection context such as a constructor, a factory function, a field initializer,

Question

i keep getting this error after adding Firebase to my ionic projcet it is mostly this function

provideFirebaseApp(() =>initializeApp(environment.firebaseConfig)`

This my app.moule.ts what i put in comments are things i trided but the problem persist

[tag:Error: NG0203: inject()]

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { initializeApp, provideFirebaseApp } from '@angular/fire/app';
import { getAuth, provideAuth } from '@angular/fire/auth';
import { getFirestore, provideFirestore } from '@angular/fire/firestore';
import { getDatabase, provideDatabase } from '@angular/fire/database';
import { AngularFireAuthModule } from '@angular/fire/compat/auth';
// import { AuthService } from './service/auth.service';
import { AngularFireModule } from '@angular/fire/compat';
import { environment } from 'src/environments/environment';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    IonicModule.forRoot(),
    AppRoutingModule,
    // AngularFireAuthModule,
    // AngularFireModule,
    
      provideFirebaseApp(() =>
    initializeApp({
      projectId: 'xxxxxxxx',
      appId: 'xxxxxxxx',
      databaseURL: 'xxxxxxxx',
      storageBucket: 'xxxxx',
      // locationId: 'us-central',
      apiKey: 'xxxxxxx',
      authDomain: 'xxxxxx',
      messagingSenderId: 'xxxx',
    })
  ),
    provideAuth(() => getAuth()),
    provideFirestore(() => getFirestore()),
    provideDatabase(() => getDatabase()),
  ],
  providers: [{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }],
  bootstrap: [AppComponent],
})
export class AppModule {
  constructor(){
    // AngularFireModule.initializeApp(environment.firebaseConfig)
    /////===================
    //   provideFirebaseApp(() =>
  //   initializeApp({
  //     projectId: 'bado-7bb5e',
  //     appId: '1:328202099806:web:45d57785347cdb276728cf',
  //     databaseURL: 'https://bado-7bb5e-default-rtdb.firebaseio.com',
  //     storageBucket: 'bado-7bb5e.appspot.com',
  //     // locationId: 'us-central',
  //     apiKey: 'AIzaSyB4XiwQ76ugIAChcjRUSYWZRnR_olJmiVo',
  //     authDomain: 'bado-7bb5e.firebaseapp.com',
  //     messagingSenderId: '328202099806',
  //   })
  // )
  }
}

when i put that function in the constroctor the problem stops and when i call afAuth=inject(AngularFireAuth) in my homePage.ts th problem comes back