AngularFire's getAuth() causing "No Firebase App '[DEFAULT]' has been created" error

Ionic Framework
1

My Ionic 5 app uses Angular/fire, and the app.module.ts contains the following:

import { environment } from '../environments/environment';
import { initializeApp,provideFirebaseApp } from '@angular/fire/app';
import { provideAuth,getAuth } from '@angular/fire/auth';

// ..blah blah blah

@NgModule({
  // ...
  imports: [
    //...
    provideFirebaseApp(() => initializeApp(environment.firebase)),
    provideAuth(() => getAuth()),
    //...
    ]

But when I run it, I get the error (referencing getAuth()

ERROR Error: Uncaught (in promise): FirebaseError: Firebase: No Firebase App '[DEFAULT]' has been created - call Firebase App.initializeApp() (app/no-app).
FirebaseError: Firebase: No Firebase App '[DEFAULT]' has been created - call Firebase App.initializeApp() (app/no-app).
    at getApp (index.esm2017.js:459)
    at getAuth (index-8593558d.js:9298)
    at angular-fire.js:225
///....

What the heck??? It worked fine last week. Not sure what changed since then!

How can I fix this?
Here’s the package.json

{
  "name": "servicefinder",
  "version": "0.10.1",
  "author": "Obinna Ezeilo",
  "homepage": "https://servicefinderapp.com/",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "12.2.14",
    "@angular/core": "12.2.14",
    "@angular/fire": "^7.1.0",
    "@angular/forms": "12.2.14",
    "@angular/platform-browser": "12.2.14",
    "@angular/platform-browser-dynamic": "12.2.14",
    "@angular/router": "12.2.14",
    "@capacitor/android": "^3.3.3",
    "@capacitor/app": "1.0.6",
    "@capacitor/camera": "^1.2.1",
    "@capacitor/core": "3.3.2",
    "@capacitor/filesystem": "^1.0.6",
    "@capacitor/haptics": "1.1.3",
    "@capacitor/ios": "3.3.3",
    "@capacitor/keyboard": "1.1.3",
    "@capacitor/push-notifications": "^1.0.7",
    "@capacitor/splash-screen": "^1.2.0",
    "@capacitor/status-bar": "^1.0.6",
    "@capacitor/storage": "^1.2.3",
    "@ionic-native/camera": "5.32.1",
    "@ionic-native/core": "5.32.1",
    "@ionic-native/file": "5.32.1",
    "@ionic-native/firebase-authentication": "^5.32.1",
    "@ionic-native/image-picker": "^5.32.1",
    "@ionic-native/splash-screen": "^5.32.1",
    "@ionic-native/status-bar": "5.32.1",
    "@ionic-native/stripe": "5.32.1",
    "@ionic/angular": "5.6.5",
    "@ionic/pwa-elements": "^3.0.2",
    "@ungap/global-this": "^0.4.4",
    "angular4-paystack": "3.0.2",
    "cordova": "^10.0.0",
    "cordova-ios": "6.2.0",
    "cordova-plugin-file": "^6.0.2",
    "cordova-plugin-image-picker": "^1.1.3",
    "cordova-sqlite-storage": "6.0.0",
    "cordova-support-android-plugin": "1.0.2",
    "cordova-support-google-services": "^1.4.1",
    "core-js": "^3.11.0",
    "firebase": "9.6.0",
    "formidable": "^3.1.5",
    "globalthis": "^1.0.2",
    "npm-check-updates": "^11.5.4",
    "rxfire": "6.0.0",
    "rxjs": "6.6.7",
    "tslib": "2.2.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/architect": "0.1202.13",
    "@angular-devkit/build-angular": "12.2.13",
    "@angular-devkit/core": "12.2.13",
    "@angular-devkit/schematics": "12.2.13",
    "@angular/cli": "12.2.13",
    "@angular/compiler": "12.2.14",
    "@angular/compiler-cli": "12.2.14",
    "@angular/language-service": "12.2.14",
    "@capacitor/cli": "3.3.2",
    "@ionic/angular-toolkit": "3.1.1",
    "@ionic/lab": "3.2.10",
    "@types/jasmine": "3.9.1",
    "@types/jasminewd2": "~2.0.10",
    "@types/node": "~15.0.1",
    "codelyzer": "^6.0.1",
    "cordova-plugin-device": "^2.0.3",
    "cordova-plugin-ionic-keyboard": "^2.2.0",
    "cordova-plugin-ionic-webview": "^5.0.0",
    "cordova-plugin-whitelist": "^1.3.4",
    "jasmine-core": "3.9.0",
    "jasmine-spec-reporter": "~7.0.0",
    "karma": "^6.3.2",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~3.0.3",
    "karma-jasmine": "~4.0.1",
    "karma-jasmine-html-reporter": "^1.5.4",
    "npm-force-resolutions": "0.0.10",
    "protractor": "7.0.0",
    "ts-node": "~9.1.1",
    "tslint": "6.1.3",
    "typescript": "4.3.5"
  },
  "description": "Service Finder",
  "cordova": {
    "plugins": {
      "cordova-plugin-image-picker": {},
      "cordova-sqlite-storage": {},
      "cordova-plugin-camera": {
        "ANDROID_SUPPORT_V4_VERSION": "27.+"
      },
      "cordova-plugin-file": {},
      "cordova-plugin-whitelist": {},
      "cordova-plugin-device": {},
      "cordova-plugin-ionic-webview": {
        "ANDROID_SUPPORT_ANNOTATIONS_VERSION": "27.+"
      },
      "cordova-plugin-ionic-keyboard": {},
      "cordova-plugin-firebase-authentication": {}
    },
    "platforms": [
      "ios"
    ]
  },
  "resolutions": {
    "@babel/preset-env": "^7.8.7"
  }
}

Thanks.

2

i think you are calling firebase before it has been created and initialized:

try something like:

provideFirebaseApp(() => initializeApp(environment.firebase)).then( () => {
provideAuth(() => getAuth());
}) ,

3

Thanks, but it failed because provideFIrebaseApp() is not a promise, so ‘then’ doesn’t exist.
Property 'then' does not exist on type 'ModuleWithProviders<FirebaseAppModule>'

4

try to call this provideFirebaseApp(() => initializeApp(environment.firebase)) before the getAuth and check the firebase configuration file, it should be something like:

firebaseConfig: {
    apiKey: "your key",
    authDomain: "yourdomain.firebaseapp.com",
    databaseURL: "https:/databaseurl.firebaseio.com",
    projectId: "your-proj-id",
    storageBucket: "xxxxx",
    messagingSenderId: "xxxxxx",
    appId: "1:39483874387xxxxxx",
    measurementId: "G-KNCJF8XXXX"
  }
5

Thanks, but it’s already called before getAuth(). Here’s the full app.module.ts file

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy} from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';

import { AuthenticateService } from './services/auth.service';
import { ReactiveFormsModule,FormsModule } from '@angular/forms';
import { provideMessaging,getMessaging } from '@angular/fire/messaging';
//import { FcmService } from '@services/fcm.service';

import { provideFirestore,getFirestore, enableIndexedDbPersistence } from '@angular/fire/firestore';
import { ComponentsModule } from '../app/components/components.module';
import { PopupMenuComponent }  from '../app/components/popup-menu/popup-menu.component';
import { CategoriesComponent } from '../app/components/categories/categories.component';
import { BusinessSendQuotePageModule } from '../app/pages/business-send-quote/business-send-quote.module';
import { RatingPageModule } from '@pages/rating/rating.module';
import { QuoteDetailsPageModule } from '../app/pages/quote-details/quote-details.module';
import { ContactFormPageModule } from '../app/pages/contact-form/contact-form.module';
import { ForgotpasswordPageModule } from '../app/pages/forgotpassword/forgotpassword.module';
import { CreditCardFormPageModule } from '../app/pages/credit-card-form/credit-card-form.module';
import { PayWithPaystackPageModule } from '@pages/pay-with-paystack/pay-with-paystack.module';
import { HttpClientModule, HttpClient } from '@angular/common/http';
import { Camera } from '@ionic-native/camera/ngx';
import { File } from '@ionic-native/file/ngx';
import { Stripe } from '@ionic-native/stripe/ngx';
import { PreviewPageModule } from './pages/preview/preview.module';
import { TosPageModule } from '@pages/tos/tos.module';
import { Angular4PaystackModule } from 'angular4-paystack';
import { environment } from '../environments/environment';
import { initializeApp,provideFirebaseApp } from '@angular/fire/app';
import { provideAuth,getAuth } from '@angular/fire/auth';
import { provideFunctions,getFunctions } from '@angular/fire/functions';
import { provideStorage,getStorage } from '@angular/fire/storage';
//import { TextBoxComponent } from '@components/text-box/text-box.component';

@NgModule({
  declarations: [AppComponent,PopupMenuComponent,CategoriesComponent],
  entryComponents: [PopupMenuComponent,CategoriesComponent ],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule,
    RatingPageModule,QuoteDetailsPageModule,
    HttpClientModule,CreditCardFormPageModule,PreviewPageModule,TosPageModule,
    ReactiveFormsModule,ComponentsModule,BusinessSendQuotePageModule,ContactFormPageModule,
    PayWithPaystackPageModule,FormsModule,ForgotpasswordPageModule,
    Angular4PaystackModule.forRoot('pk_test_5a689aa4d3f6762b353f1b4ea0a0b8b42e38b0d1'),
    provideFirebaseApp(() => initializeApp(environment.firebase)),
    provideAuth(() => getAuth()),
    provideFirestore(() => {
      const firestore = getFirestore(); 
      enableIndexedDbPersistence(firestore); 
      return firestore;
      }),
    provideFunctions(() => getFunctions()),
    provideMessaging(() => getMessaging()),
    provideStorage(() => getStorage())],
    
  providers: [Stripe,
    SplashScreen,//FcmService,
    AuthenticateService,
    ,Camera,File,HttpClient,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

And environment.ts

// This file can be replaced during build by using the `fileReplacements` array.
// `ng build --prod` replaces `environment.ts` with `environment.prod.ts`.
// The list of file replacements can be found in `angular.json`.

export const environment = {
  production: false,
  firebase: {
    projectId: 'the project ID',
    appId: '1:xxxxx',
    databaseURL: 'https://xxxx.firebaseio.com',
    storageBucket: 'xxxx.appspot.com',
    locationId: 'us-central',
    apiKey: 'xxxthe_key',
    authDomain: 'service-finder-a7243.firebaseapp.com',
    messagingSenderId: '12345',
  },
  geocoding: {
    api_key:'zzz-zzz',
    url: 'https://maps.googleapis.com/maps/api/geocode/json?address='
  },
  stripe:
  {
    publishableKey:'pk_test_ZZZZZ',
    secretKey:'sk_test_ZZZZZ',
    chargeURL:'https://us-central1-ZZZZZZ.cloudfunctions.net/payWithStripe',
    newCustomerURL:'https://us-central1-ZZZZZZ.cloudfunctions.net/createStripeCustomer',
    newCardURL:'https://us-central1-ZZZZZZ.cloudfunctions.net/createStripeCard',
    updateCardURL:'https://us-central1-ZZZZZZ.cloudfunctions.net/updateStripeCard',
    deleteCardURL:'https://us-central1-ZZZZZZ.cloudfunctions.net/deleteStripeCard'
    
  },
  functionapi:{
    contactUrl : 'https://us-central1-xxxxxx.cloudfunctions.net/sendMail',
    //contactUrl : 'http://localhost:5000/xxxxxx/us-central1/sendMail'
  }

};
6

are you sure provideAuth(() => getAuth()), has to be called inside app.module ?

anyway, i just made a quick test with angular firebase module,
give it a try

image
image1174×278 27.9 KB

7

Thanks, but I was taking advantage of Firebase 9’s new modular format, as described in this tutorial Learn how to Initialize Firebase in your Ionic app :: Js Mobile Dev — Jorge Vergara.

Anyway I ended up deleting node_modules, package-lock.json, reinstalled firebase and ran “npm i”.
That seemed to fix it, at least on the web (ionic serve). Now I’m stuck with the app crashing on the device (Android emulator) after the splash screen, and just showing a white screen on the iOS emulator.

8

Update: The blank screen on iOS is due to running the app with “npx cap run ios”. If I run “ionic cap run ios” it works fine. I thought they were the same thing!

I fixed the app crashing on Android emulator. It was because I didn’t have google-services.json file in the android/app folder and capacitor/push-notifications was panicking.