Error in latest @angular/fire: Firebase: No Firebase App '[DEFAULT]' has been created - call Firebase App.initializeApp()

Question

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!

Answer 1

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.

Answer 2

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.