AngularFire FirebaseError: "No Firebase App '[DEFAULT]' has been created - call initializeApp() first (app/no-app)."

Question

I updated Node modules rxfire from 6.0.3 to 6.0.4 and firebase from 9.23.0 to 10.3.0. Now my Angular app won't start. I ran npm install [email protected] and npm install [email protected] to revert back to the old Node modules but the error persists. I also deleted my node modules and ran npm install.

The error is:

FirebaseError: Firebase: No Firebase App '[DEFAULT]' has been created - call initializeApp() first (app/no-app).

Several StackOverflow pages answer this question for namespaced Firebase, not for modularized Firebase.

Here's my app.module.ts file:

import { NgModule } from '@angular/core';
...import lots more modules...
// AngularFire modules
import { environment } from '../environments/environment';
import { initializeApp, provideFirebaseApp } from '@angular/fire/app';
import { provideAnalytics, getAnalytics, ScreenTrackingService, UserTrackingService } from '@angular/fire/analytics';
import { provideAuth, getAuth } from '@angular/fire/auth';
import { provideFirestore, getFirestore } from '@angular/fire/firestore';
import { provideFunctions, getFunctions } from '@angular/fire/functions';
import { providePerformance, getPerformance } from '@angular/fire/performance';

@NgModule({
  declarations: [
    ...lots of components...
  ],
  imports: [
    // Firebase modules
    provideFirebaseApp(() => initializeApp(environment.firebase)),
    provideAnalytics(() => getAnalytics()),
    provideAuth(() => getAuth()),
    provideFirestore(() => getFirestore()),
    provideFunctions(() => getFunctions()),
    providePerformance(() => getPerformance()),
    provideStorage(() => getStorage()),
    // Angular modules
    BrowserModule,
    CommonModule,
    AppRoutingModule,
    ...lots more modules...
  ],
  providers: [
   ...a few services...
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

The error is saying that I need to put initializeApp(environment.firebase)) above everything else. It is at the top of the imports.

The error is also saying that it's trying to hook up to a Firebase App called [DEFAULT]. My Firebase project is called LanguageTwo. What is a "Firebase App"? Is that the same as a Firebase project?

I have

• Angular 16.2.1 and 16.2.2
• @angular/[email protected]
• [email protected]
• [email protected]
• [email protected]
• [email protected]
• [email protected]

Maybe the update this morning updated a dependency that's causing the trouble?

I reverted back to

• [email protected]
• [email protected]

deleted the npm modules folder and ran npm install. Same error message.

I ran ng add @angular/fire again to connect the Angular app to my Firebase project and app.

Answer 1

initializeApp doesn't have to be at the top of the imports, it just has to be above the rest of your other firebase provide calls. You can't getAuth getFirestore or getAnalytics unless you have first provided the firebase app itself. So your imports look good in that regard, however the only thing else that I can think is that you have not actually created the firebase application through the firebase console? Are you accepting connections to it? Did you maybe switch some of the firebase config values?