Question 261695 in Firebase Question posted in
An extensive official documentation can be found here.

Firebase initialize issue

I am trying to initialize firebase in my project. I need to use the Google Auth feature, which is already enabled on the console of firebase.

The method I am calling is the following:

import firebase from 'firebase/compat/app';
import {
  getAuth,
  signInWithPopup,
  GoogleAuthProvider,
  UserCredential,
} from 'firebase/auth';
    
googleSignIn(): Promise<UserCredential> {
    const provider = new GoogleAuthProvider();
    const auth = getAuth();
    return signInWithPopup(auth, provider);
}

The app.module.ts looks like the following:

@NgModule({
  declarations: [AppComponent],
  imports: [
    provideFirebaseApp(() => initializeApp(environment.firebase)),
    EffectsModule.forRoot([UserEffects]),
    ...
  ],
  providers: [],
  bootstrap: [AppComponent],
})

Unfortunately this yields an error:

core.mjs:8400 ERROR FirebaseError: Firebase: No Firebase App '[DEFAULT]' has been created - call initializeApp() first (app/no-app).
    at getApp (index.esm2017.js:479:29)
    at getAuth (index-9a76d29a.js:10414:30)
    at RestClientService.googleSignIn (rest-client.service.ts:20:25)
    at user.effects.ts:31:37
    at source.subscribe.isComplete (switchMap.js:14:23)
    at OperatorSubscriber._next (OperatorSubscriber.js:13:21)
    at OperatorSubscriber.next (Subscriber.js:31:18)
    at filter.js:6:128
    at OperatorSubscriber._next (OperatorSubscriber.js:13:21)
    at OperatorSubscriber.next (Subscriber.js:31:18)

The environment.firebase is correct. I cannot understand how it is possible to not be correctly initialized.

Here are my dependencies:

  "dependencies": {
    "@angular/animations": "^15.2.0",
    "@angular/common": "^15.2.0",
    "@angular/compiler": "^15.2.0",
    "@angular/core": "^15.2.0",
    "@angular/fire": "^7.6.1",
    "@angular/forms": "^15.2.0",
    "@angular/platform-browser": "^15.2.0",
    "@angular/platform-browser-dynamic": "^15.2.0",
    "@angular/router": "^15.2.0",
    "@ngrx/effects": "^15.4.0",
    "@ngrx/entity": "^15.4.0",
    "@ngrx/store": "^15.4.0",
    "@ngrx/store-devtools": "^15.4.0",
    "firebase": "^10.4.0",
    "primeflex": "^3.3.1",
    "primeicons": "^6.0.1",
    "primeng": "^15.4.1",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.12.0"
  },

Edit: I tried reinstalling and re-adding @angular/fire multiple times and it does not change anything unfortunately.

Tags:

2

Answers


  1. 0

    maybe you can try this ,

    @NgModule({
  declarations: [AppComponent],
 imports: [
   //remove this line from the imports ////////////////////////////
   provideFirebaseApp(() => initializeApp(environment.firebase)), 
   ////////////////////////////////////////////////////////////////
   EffectsModule.forRoot([UserEffects]),
   ...
 ],
 providers: [],
 bootstrap: [AppComponent],
})

    and then before the declaration of the module , add this manual initialization:

    import * as firebase from 'firebase';

  // Initialize Firebase
  export const config = {
    apiKey: "yourdata",
    authDomain: "yourdata",
    databaseURL: "https://yourdata",
    projectId: "yourdata",
    storageBucket: "yourdata",
    messagingSenderId: "yourdata"   
  };
  firebase.initializeApp(config)

    try this for do a proof of concept if the error is solved you have a clue of what it is , have a good one.

    Login or Signup to reply.
  2. 0

    I’m having the same issue. It started after implementing the Firebase Emulators. I’ve remove everything related to the Firebase Emulators but the issue still there. It doesn’t fail all the time.

    Weird. I’ll keep an eye here

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search