"No Firebase App '[DEFAULT]' has been created" when using " provideFirebaseApp(() => initializeApp(environment.firebase))," in app.module.ts imports array, getStorage()

AlteriusOmega commented 9 months ago

Version info

Angular: ^16.2.0

Firebase: ^10.4.0

AngularFire: ^7.6.1

Other (e.g. Ionic/Cordova, Node, browser, operating system):

How to reproduce these conditions

Steps to set up and reproduce Create Angular app via ng new appName, add Angularfire with ng add @angular/fire, initialize Firebase app in app.module.ts using the following in the imports array:

provideFirebaseApp(() => initializeApp(environment.firebase)), Then, integrate firebase app via environments (create with ng add environment if needed), add storage service that connects to storage bucket via getStorage()

Debug output

Expected behavior

Storage service should work fine. It should not be possible for any component or module to access the firebase app before its created when its initialized in the app.module.ts imports array.

Actual behavior

Storage service causes Firebase error "ERROR Error: Uncaught (in promise): FirebaseError: Firebase: No Firebase App '[DEFAULT]' has been created - call initializeApp() first (app/no-app)."

AlteriusOmega commented 9 months ago

Here's more information. This is for a simple e-store Angular application using Firebase and Angularfire.

Below is my app.module.ts:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ProductsModule } from './products/products.module';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NavbarComponent } from './navbar/navbar.component';
import { SearchComponent } from './search/search.component';
import { SearchResultsComponent } from './search-results/search-results.component';
import { ProductsComponent } from './products/products.component';
import { ProductItemComponent } from './products/product-item/product-item.component';
import { ProductDetailComponent } from './products/product-detail/product-detail.component';
import { CartComponent } from './cart/cart.component';
import { FooterComponent } from './footer/footer.component';
import { LoginComponent } from './login/login.component';
import { HomeComponent } from './home/home.component';

import { SharedModule } from './shared/shared.module';
import { SignupComponent } from './signup/signup.component';
import { initializeApp, provideFirebaseApp } from '@angular/fire/app';
import { environment } from '../environments```
/environment';
import { provideAuth,getAuth } from '@angular/fire/auth';
import { provideFirestore,getFirestore } from '@angular/fire/firestore';
import { provideStorage, getStorage } from '@angular/fire/storage';

// initializeApp(environment.firebase);

@NgModule({
  declarations: [
    AppComponent,
    NavbarComponent,
    SearchComponent,
    SearchResultsComponent,
    ProductsComponent,
    ProductItemComponent,
    ProductDetailComponent,
    CartComponent,
    FooterComponent,
    LoginComponent,
    HomeComponent,
    SignupComponent,
  ],
  imports: [
    provideFirebaseApp(() => initializeApp(environment.firebase)),
    provideAuth(() => getAuth()),
    provideFirestore(() => getFirestore()),
    provideStorage(() => getStorage()),
    BrowserModule,
    AppRoutingModule,
    SharedModule,
    ProductsModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

This is the storage service that's causing the error:

import { Injectable } from '@angular/core';
import { Storage, StorageReference, getStorage, ref } from '@angular/fire/storage';

@Injectable({
  providedIn: 'root'
})
export class StorageService {
  storage: Storage;
  storageRef: StorageReference;

  constructor() {
    this.storage = getStorage();
    this.storageRef = ref(this.storage);
  }

  getImage1() {
    const image1Ref = ref(this.storage, 'images/dice-puzzle-d12.webp');
    console.log(`In getImage1 and fullPath is ${image1Ref.fullPath}, name: ${image1Ref.name}, bucket: ${image1Ref.bucket}`);
    return image1Ref;
  }
}

Here is the products component that uses the storage service and triggers the error:

import { Component, OnInit } from '@angular/core';
import { ProductService } from '../product.service';
import { StorageService } from '../storage.service';

@Component({
  selector: 'app-products',
  templateUrl: './products.component.html',
  styleUrls: ['./products.component.less']
})
export class ProductsComponent implements OnInit{

  products: any[] = [];

  constructor(private productService: ProductService, private storageService: StorageService){
    productService.fetchProducts()
      .then(products => {
        console.log(`Products is`, products);
      });
    const image1Ref = this.storageService.getImage1();
  }
  ngOnInit(): void {
    this.loadProducts();
  }
  async loadProducts(): Promise<void>{
    this.products = await this.productService.fetchProducts();
  }
}

Note that I don't actually have to call the getImage1 method from the service. Merely the creation of storageService in the constructor is enough to trigger it. I can also comment out almost everything in the storage service except for this.storage = getStorage() and that is enough to cause the error.

I don't understand how its possible that the storage service is accessing the Firebase app before its created since I initialize it inside the app.module.ts file imports array. I have made that the first line in the imports array and it doesn't change anything.

AlteriusOmega commented 9 months ago

I found this Stack Overflow post with a workaround by putting this outside of @ngModule:

firebase.initializeApp(environment.firebase);

But of course this no longer works because there have been breaking changes since then and that is no longer the correct way to initialize the app, and now trying to initialize it outside of @ngModule will throw a different error.

AlteriusOmega commented 9 months ago

I finally found this Stack Overflow post and used the version numbers they laid out for Angularfire, Firebase and rxfire and it fixed the issue. It seems like this is a bug in getStorage() depending on versions. The thing is, I used "ng add @angular/fire" to add Angularfire, which should theoretically use compatible versions. Below are the versions I'm using which are working:

"dependencies": {
    "@angular/animations": "^16.2.0",
    "@angular/common": "^16.2.0",
    "@angular/compiler": "^16.2.0",
    "@angular/core": "^16.2.0",
    "@angular/fire": "7.6.0",
    "@angular/forms": "^16.2.0",
    "@angular/platform-browser": "^16.2.0",
    "@angular/platform-browser-dynamic": "^16.2.0",
    "@angular/router": "^16.2.0",
    "rxfire": "6.0.3",
    "bootstrap": "^5.3.2",
    "firebase": "^9.8.2",
    "rxjs": "~7.8.0",
    "tslib": "^2.6.2",
    "zone.js": "~0.13.0"

rgant commented 9 months ago

You might also want these overrides for rxfire to correct a firebase@10 version incompatibility.

wesleyvseth commented 9 months ago

Looks like i got the same thing happening for Functions. Exact same way of providing works for auth + database. But not for functions.

MusaSoruklu commented 9 months ago

Looks like i got the same thing happening for Functions. Exact same way of providing works for auth + database. But not for functions.

I have the same issue.

spock123 commented 9 months ago

The reason is a breaking change introduced in rxfire@6.0.4 There is an open issue on their github repo: https://github.com/FirebaseExtended/rxfire/issues/88

WilliamCampolina commented 9 months ago

I have the same problem

Dsthdragon commented 8 months ago

Have the same problem with getMessaging() but mine only happens when I run the app on my MacBook. It works fine on windows and ubuntu though I am serving the app from the MacBook.

jamesmfinney93 commented 8 months ago

Also have the same issue as @Dsthdragon - is there any update on a fix?

spock123 commented 8 months ago

Also have the same issue as @Dsthdragon - is there any update on a fix?

Fix @angular/fire to 7.5.0

"@angular/fire": "7.5.0",

Dsthdragon commented 8 months ago

Also have the same issue as @Dsthdragon - is there any update on a fix?

Fix @angular/fire to 7.5.0

"@angular/fire": "7.5.0",

tried this and still the same

Dsthdragon commented 8 months ago

So, i finally got mine to work turns out the i didn't properly run the upgrade of @angular/fire. (it was a project from 2020). Removed the package from package.json and ran ng add @angular/fire (install firebase-tools before that) and it works now.

lakhveer02 commented 5 months ago

main.ts:5 ERROR FirebaseError: Firebase: No Firebase App '[DEFAULT]' has been created - call initializeApp() first (app/no-app). at getApp (index.esm2017.js:479:29) at getFirestore (index.esm2017.js:18673:42) at new _ProductService (product.service.ts:9:23) at Object.ProductService_Factory [as factory] (product.service.ts:36:3) at core.mjs:6255:43 at runInInjectorProfilerContext (core.mjs:956:9) at R3Injector.hydrate (core.mjs:6254:17) at R3Injector.get (core.mjs:6122:33) at R3Injector.get (core.mjs:6133:33) at R3Injector.get (core.mjs:6133:33) ![Uploading Screenshot from 2024-02-08 12-25-36.png…]()

oliveti commented 1 month ago

I'm still having the issue with the latest version of firebase (also the 17).

Does someone else still have it or found a fix for this version ?

lakhveer02 commented 1 month ago

It's fixed!

On Mon, 27 May, 2024, 12:59 pm olivier spieser, @.***> wrote:

I'm still having the issue with the latest version of firebase (also the 17).

Does someone else still have it or found a fix for this version ?

— Reply to this email directly, view it on GitHub https://github.com/angular/angularfire/issues/3443#issuecomment-2132824410, or unsubscribe https://github.com/notifications/unsubscribe-auth/BCWT7BKB2FQJ34R3M7OP75LZELOGTAVCNFSM6AAAAAA5PZSO7GVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDCMZSHAZDINBRGA . You are receiving this because you commented.Message ID: @.***>

oliveti commented 1 month ago

I've found my error, I had a dependency to @stripe/firestore-stripe-payments which was outdated.

angular / angularfire