Skip to content

"ERROR FirebaseError: Firebase: No Firebase App '[DEFAULT]' has been created - call initializeApp() first (app/no-app)." I got this message after upgrading from angular/fire version 18.0.1 to 19.0.0 #3634

Open
@praticboutic

Description

@praticboutic

Got blank page on landing page and the error on any browsers when running ng serve :

main.ts:12 ERROR FirebaseError: Firebase: No Firebase App '[DEFAULT]' has been created - call initializeApp() first (app/no-app).
at getApp (index.esm2017.js:628:25)
at getMessagingInWindow (index.esm2017.js:1152:37)
at angular-fire.mjs:174:44
at angular-fire.mjs:127:41
at _ZoneDelegate.invoke (zone.js:369:28)
at ZoneImpl.run (zone.js:111:43)
at _NgZone.runOutsideAngular (core.mjs:6421:24)
at runOutsideAngular (angular-fire.mjs:127:17)
at angular-fire.mjs:174:17
at firebase.module.ts:18:28
main.ts:13 FirebaseError: Firebase: No Firebase App '[DEFAULT]' has been created - call initializeApp() first (app/no-app).
at getApp (index.esm2017.js:628:25)
at getMessagingInWindow (index.esm2017.js:1152:37)
at angular-fire.mjs:174:44
at angular-fire.mjs:127:41
at _ZoneDelegate.invoke (zone.js:369:28)
at ZoneImpl.run (zone.js:111:43)
at _NgZone.runOutsideAngular (core.mjs:6421:24)
at runOutsideAngular (angular-fire.mjs:127:17)
at angular-fire.mjs:174:17
at firebase.module.ts:18:28
(anonyme) @ main.ts:13
invoke @ zone.js:369
run @ zone.js:111
(anonyme) @ zone.js:2538
invokeTask @ zone.js:402
runTask @ zone.js:159
drainMicroTaskQueue @ zone.js:581
Promise.then
nativeScheduleMicroTask @ zone.js:557
scheduleMicroTask @ zone.js:568
scheduleTask @ zone.js:391
scheduleTask @ zone.js:205
scheduleMicroTask @ zone.js:225
scheduleResolveOrReject @ zone.js:2528
then @ zone.js:2733
bootstrapModule @ core.mjs:35456
(anonyme) @ main.ts:12

It appears when upgarding from @angular/fire version 18.0.1 to version 19.0.0

Additionnal info :

firebase.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { provideFirestore, getFirestore } from '@angular/fire/firestore';
import { getMessaging, provideMessaging } from '@angular/fire/messaging';
import { provideFirebaseApp, initializeApp } from '@angular/fire/app';
import { getAuth, provideAuth } from '@angular/fire/auth';
import { environment } from './../../environments/environment';


@NgModule({
  imports: [
    CommonModule,
  ],
  providers: [
    provideFirebaseApp(() => initializeApp(environment.firebase)),
    provideFirestore(() => getFirestore()),
    provideAuth(() => getAuth()),
    provideMessaging(() => getMessaging()), // 👈👈👈 importing messaging module
  ]
})

export class FirebaseModule { }

thrown by main.ts

/// <reference types="@angular/localize" />

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

if (environment.production) {
  window.console.log = () => { }
}

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

package.json

"dependencies": {
...
"@angular/fire": "^19.0.0",

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions