Error in latest @angular/fire: Firebase: No Firebase App '[DEFAULT]' has been created

I've upgraded to the latest version of @angular/fire recently, and everything worked fine, but now I've migrated away from the compat libraries, and now I'm stuck with this issue. I get this error on the following code: Firebase: No Firebase App '[DEFAULT]' has been created - call Firebase App.initializeApp().

// ...
import {getAuth, provideAuth} from '@angular/fire/auth';
import {getFirestore, provideFirestore} from '@angular/fire/firestore';
import {initializeApp, provideFirebaseApp} from '@angular/fire/app';
// ...

@NgModule({
  // ...
  providers: [
    // ...
    provideFirebaseApp(() => initializeApp(window['firebase_config'])),
    provideFirestore(() => getFirestore()),
    provideAuth(() => getAuth()),
    // ...
  ],
  // ...
})
export class ApModule {
  // ...
}

Here is the stack trace:

Error: Firebase: No Firebase App '[DEFAULT]' has been created - call Firebase App.initializeApp() (app/no-app).
    at new ZoneAwareError (http://localhost:4200/vendor.js:65953:33)
    at new FirebaseError (http://localhost:4200/apps_frontend_src_app_app_module_ts.js:166709:5)
    at ErrorFactory.create (http://localhost:4200/apps_frontend_src_app_app_module_ts.js:166739:19)
    at getApp (http://localhost:4200/apps_frontend_src_app_app_module_ts.js:122971:25)
    at getAuth (http://localhost:4200/apps_frontend_src_app_app_module_ts.js:137360:77)
    at http://localhost:4200/apps_frontend_src_app_app_module_ts.js:69140:44
    at http://localhost:4200/apps_frontend_src_app_app_module_ts.js:69066:57
    at ZoneDelegate.invoke (http://localhost:4200/polyfills.js:463:26)
    at Zone.run (http://localhost:4200/polyfills.js:225:43)
    at NgZone.runOutsideAngular (http://localhost:4200/vendor.js:34688:28)
    at runOutsideAngular (http://localhost:4200/apps_frontend_src_app_app_module_ts.js:69066:33)
    at http://localhost:4200/apps_frontend_src_app_app_module_ts.js:69140:17
    at http://localhost:4200/apps_frontend_src_app_app_module_ts.js:1581:144
    at http://localhost:4200/apps_frontend_src_app_app_module_ts.js:68430:47
    at ZoneDelegate.invoke (http://localhost:4200/polyfills.js:463:26)

I'm totally confused on why I'm getting this error. Any help is much appreciated!

CodePudding user response：

Apparently the issue was a mismatch in versions between firebase and @firebase/app. Because of this mismatch, firebase was actually loaded into memory twice, but only instantiated once.

CodePudding user response：

Humm.. ok, I am using version 9 upgraded from 8 in my project, and either you commented out some things or you indeed are missing some stuff. Let me share my module:

const providers = [
 // ...
  AngularFireModule,
  AngularFireAnalyticsModule,
  AngularFireAuthGuard,
  ScreenTrackingService,
  UserTrackingService,
  AngularFireAnalytics,
  {
    provide: ANALYTICS_CONFIG,
    useValue: {
      APP_NAME: appConfig.appName,
      APP_VERSION: appConfig.appVersion
    }
  }
];



@NgModule({
  imports: [
    // ...

    /** Firebase Modules */
    AngularFireModule.initializeApp(firebaseConfig),
    AngularFireAnalyticsModule,
    AngularFireAuthGuardModule,
    AngularFireDatabaseModule,
    AngularFireFunctionsModule,

    // ...
  ],
  providers,
  bootstrap: [RootComponent]
})

So my initialize app is at my imports and not on my providers, I remember I had some issues back then and after some digging and changing I came up with the above and it worked for me. As you can see I use quite a few of their services.

From the error you posted, I would guess the problem is your initializeApp not doing the initialization, so make try to move it to imports and make sure the config file has all the required properties.

==UPDATE==

Please note that I pasted my project imports, you may ignore everything else other than the AngularFireModule import and providers, since you may not use the others, I just added them for reference as they could be useful to other people.