Need to provide options, when not being deployed to hosting via source

Question

I am working on an ionic project using angular. I am trying to deploy my site locally using Firebase serve, it shows me a blank screen with a Firebase error on console I need to provide options. What options does Firebase looking for?

My app.module.ts looks something like this ----

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';
import { FormsModule } from '@angular/forms';
import { ResetpasswordPageModule } from './resetpassword/resetpassword.module';
import { AngularFireModule } from '@angular/fire/compat';
import { AngularFirestoreModule } from '@angular/fire/compat/firestore';
import { environment } from 'src/environments/environment';
// import { environment } from 'src/environments/environment.prod';
import { HomePage } from './home/home.page';
import { LoginPageModule } from './login/login.module';
import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { HomePageModule } from './home/home.module';
import { RegisterPageModule } from './register/register.module';
import { LogoutPageModule } from './logout/logout.module';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { AngularFireAuthModule } from '@angular/fire/compat/auth';
import { FirebaseApp } from '@angular/fire/app';
// import { provideFirebaseApp, initializeApp } from '@angular/fire/app';
@NgModule({
  declarations: [AppComponent,HomePage],
  imports: [
    BrowserModule,
    FormsModule,
    IonicModule.forRoot(),
    AppRoutingModule,
    HomePageModule,
    LogoutPageModule,
    RegisterPageModule,
     ResetpasswordPageModule,
     LoginPageModule,
    AngularFireModule.initializeApp((environment as any).firebaseConfig),
    AngularFireAuthModule,
    AngularFirestoreModule,
   ],
  providers: [{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy, }],
  bootstrap: [AppComponent],
})
export class AppModule {}
`

Firebase.json--------------

 `{

  "hosting": {
    "public": "www",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ],
    "headers": [
      {
        "source": "**/*",
        "headers": [
          {
            "key": "Cache-Control",
            "value": "no-cache, no-store, must-revalidate"
          }
        ]}
    ]
  }
}

my environment.ts -----------

export const environment = {
  production: false,
  firebaseConfig : {
    apiKey: "*******************",
    authDomain: "****************",
    databaseURL: "*******************/",
    projectId: '********************',
    storageBucket: "************************,
    messagingSenderId: "***********************",

   
I tired almsot everything
  },
};

environment.prod.ts--------------

export const environment = {
  production: true,
  firebase: {
    apiKey: "***************************",
    authDomain: "****************",
    databaseURL: "*******************/",
    projectId: '********************',
    storageBucket: "************************,
    messagingSenderId: "***********************",
  },
};

My configurations

Ionic-7.1.5 Angular CLI: 17.0.1 Node: 18.16.0 Package Manager: npm 9.6.5 Firebase- 10.7.0

I found somewhere that this has something to do with initialization of Firebase or application, but I couldn't understand exactly what? I've added similar configurations to environment.ts and environmnet.prod.ts already, even rebuild my WWW file, but the site is still showing as blank.