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

[TheRealSamChaney]

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

ERROR Error: Uncaught (in promise): FirebaseError: Firebase: No Firebase App '[DEFAULT]' has been created - call initializeApp() first (app/no-app).
FirebaseError@http://localhost:4200/vendor.js:73648:5
create@http://localhost:4200/vendor.js:73676:19
getApp@http://localhost:4200/vendor.js:154432:25
getStorage@http://localhost:4200/vendor.js:72546:80
4886/ɵzoneWrap/</ret<@http://localhost:4200/vendor.js:1279:44
4886/runOutsideAngular/<@http://localhost:4200/vendor.js:1211:57
invoke@http://localhost:4200/polyfills.js:8209:158
run@http://localhost:4200/polyfills.js:7994:35
runOutsideAngular@http://localhost:4200/vendor.js:108406:24
runOutsideAngular@http://localhost:4200/vendor.js:1211:33
4886/ɵzoneWrap/<@http://localhost:4200/vendor.js:1279:34
StorageService@http://localhost:4200/main.js:914:85
StorageService_Factory@http://localhost:4200/main.js:918:12
1699/hydrate/<@http://localhost:4200/vendor.js:106890:33
runInInjectorProfilerContext@http://localhost:4200/vendor.js:98413:5
hydrate@http://localhost:4200/vendor.js:106889:37
get@http://localhost:4200/vendor.js:106769:23
get@http://localhost:4200/vendor.js:111362:32
lookupTokenUsingModuleInjector@http://localhost:4200/vendor.js:102129:31
getOrCreateInjectable@http://localhost:4200/vendor.js:102175:10
ɵɵdirectiveInject@http://localhost:4200/vendor.js:109230:38
ProductsComponent_Factory@http://localhost:4200/main.js:640:211
getNodeInjectable@http://localhost:4200/vendor.js:102369:38
createRootComponent@http://localhost:4200/vendor.js:111603:48
create@http://localhost:4200/vendor.js:111470:19
createComponent@http://localhost:4200/vendor.js:121503:43
activateWith@http://localhost:4200/vendor.js:145921:31
activateRoutes@http://localhost:4200/vendor.js:146519:28
7947/activateChildRoutes/<@http://localhost:4200/vendor.js:146473:12
activateChildRoutes@http://localhost:4200/vendor.js:146472:25
activate@http://localhost:4200/vendor.js:146383:10
7947/activateRoutes/<@http://localhost:4200/vendor.js:146367:120
9736/map/</<@http://localhost:4200/vendor.js:82387:31
5678/OperatorSubscriber/this._next<@http://localhost:4200/vendor.js:82034:15
next@http://localhost:4200/vendor.js:81119:12
3738/tap/</<@http://localhost:4200/vendor.js:83039:18
5678/OperatorSubscriber/this._next<@http://localhost:4200/vendor.js:82034:15
next@http://localhost:4200/vendor.js:81119:12
9736/map/</<@http://localhost:4200/vendor.js:82387:18
5678/OperatorSubscriber/this._next<@http://localhost:4200/vendor.js:82034:15
next@http://localhost:4200/vendor.js:81119:12
1891/switchMap/</</innerSubscriber<@http://localhost:4200/vendor.js:82897:243
5678/OperatorSubscriber/this._next<@http://localhost:4200/vendor.js:82034:15
next@http://localhost:4200/vendor.js:81119:12
9736/map/</<@http://localhost:4200/vendor.js:82387:18
5678/OperatorSubscriber/this._next<@http://localhost:4200/vendor.js:82034:15
next@http://localhost:4200/vendor.js:81119:12
384/fromArrayLike/<@http://localhost:4200/vendor.js:81823:18
_trySubscribe@http://localhost:4200/vendor.js:80744:19
2235/subscribe/<@http://localhost:4200/vendor.js:80738:113
errorContext@http://localhost:4200/vendor.js:83975:5
subscribe@http://localhost:4200/vendor.js:80733:69
9736/map/<@http://localhost:4200/vendor.js:82386:12
4114/operate/</<@http://localhost:4200/vendor.js:84264:18
2235/subscribe/<@http://localhost:4200/vendor.js:80738:42
errorContext@http://localhost:4200/vendor.js:83975:5
subscribe@http://localhost:4200/vendor.js:80733:69
1891/switchMap/</<@http://localhost:4200/vendor.js:82897:100
5678/OperatorSubscriber/this._next<@http://localhost:4200/vendor.js:82034:15
next@http://localhost:4200/vendor.js:81119:12
1891/switchMap/</</innerSubscriber<@http://localhost:4200/vendor.js:82897:243
5678/OperatorSubscriber/this._next<@http://localhost:4200/vendor.js:82034:15
next@http://localhost:4200/vendor.js:81119:12
9736/map/</<@http://localhost:4200/vendor.js:82387:18
5678/OperatorSubscriber/this._next<@http://localhost:4200/vendor.js:82034:15
next@http://localhost:4200/vendor.js:81119:12
1527/take/</<@http://localhost:4200/vendor.js:82932:20
5678/OperatorSubscriber/this._next<@http://localhost:4200/vendor.js:82034:15
next@http://localhost:4200/vendor.js:81119:12
728/defaultIfEmpty/</<@http://localhost:4200/vendor.js:82177:20
5678/OperatorSubscriber/this._complete<@http://localhost:4200/vendor.js:82050:9
complete@http://localhost:4200/vendor.js:81135:12
384/fromArrayLike/<@http://localhost:4200/vendor.js:81825:16
_trySubscribe@http://localhost:4200/vendor.js:80744:19
2235/subscribe/<@http://localhost:4200/vendor.js:80738:113
errorContext@http://localhost:4200/vendor.js:83975:5
subscribe@http://localhost:4200/vendor.js:80733:69
728/defaultIfEmpty/<@http://localhost:4200/vendor.js:82172:12
4114/operate/</<@http://localhost:4200/vendor.js:84264:18
2235/subscribe/<@http://localhost:4200/vendor.js:80738:42
errorContext@http://localhost:4200/vendor.js:83975:5
subscribe@http://localhost:4200/vendor.js:80733:69
1527/take/<@http://localhost:4200/vendor.js:82930:12
4114/operate/</<@http://localhost:4200/vendor.js:84264:18
2235/subscribe/<@http://localhost:4200/vendor.js:80738:42
errorContext@http://localhost:4200/vendor.js:83975:5
subscribe@http://localhost:4200/vendor.js:80733:69
9736/map/<@http://localhost:4200/vendor.js:82386:12
4114/operate/</<@http://localhost:4200/vendor.js:84264:18
2235/subscribe/<@http://localhost:4200/vendor.js:80738:42
errorContext@http://localhost:4200/vendor.js:83975:5
subscribe@http://localhost:4200/vendor.js:80733:69
1891/switchMap/</<@http://localhost:4200/vendor.js:82897:100
5678/OperatorSubscriber/this._next<@http://localhost:4200/vendor.js:82034:15
next@http://localhost:4200/vendor.js:81119:12
1891/switchMap/</</innerSubscriber<@http://localhost:4200/vendor.js:82897:243
5678/OperatorSubscriber/this._next<@http://localhost:4200/vendor.js:82034:15
next@http://localhost:4200/vendor.js:81119:12
9736/map/</<@http://localhost:4200/vendor.js:82387:18
5678/OperatorSubscriber/this._next<@http://localhost:4200/vendor.js:82034:15
next@http://localhost:4200/vendor.js:81119:12
3738/tap/</<@http://localhost:4200/vendor.js:83039:18
5678/OperatorSubscriber/this._next<@http://localhost:4200/vendor.js:82034:15
next@http://localhost:4200/vendor.js:81119:12
1891/switchMap/</</innerSubscriber<@http://localhost:4200/vendor.js:82897:243
5678/OperatorSubscriber/this._next<@http://localhost:4200/vendor.js:82034:15
next@http://localhost:4200/vendor.js:81119:12
3738/tap/</<@http://localhost:4200/vendor.js:83039:18
5678/OperatorSubscriber/this._next<@http://localhost:4200/vendor.js:82034:15
next@http://localhost:4200/vendor.js:81119:12
8164/mergeInternals/doInnerSub/<@http://localhost:4200/vendor.js:82471:20
5678/OperatorSubscriber/this._next<@http://localhost:4200/vendor.js:82034:15
next@http://localhost:4200/vendor.js:81119:12
8164/mergeInternals/doInnerSub/<@http://localhost:4200/vendor.js:82471:20
5678/OperatorSubscriber/this._next<@http://localhost:4200/vendor.js:82034:15
next@http://localhost:4200/vendor.js:81119:12
384/fromArrayLike/<@http://localhost:4200/vendor.js:81823:18
_trySubscribe@http://localhost:4200/vendor.js:80744:19
2235/subscribe/<@http://localhost:4200/vendor.js:80738:113
errorContext@http://localhost:4200/vendor.js:83975:5
subscribe@http://localhost:4200/vendor.js:80733:69
doInnerSub@http://localhost:4200/vendor.js:82466:95
outerNext@http://localhost:4200/vendor.js:82461:52
5678/OperatorSubscriber/this._next<@http://localhost:4200/vendor.js:82034:15
next@http://localhost:4200/vendor.js:81119:12
7344/takeLast/</<@http://localhost:4200/vendor.js:82968:20
5678/OperatorSubscriber/this._complete<@http://localhost:4200/vendor.js:82050:9

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)."

[TheRealSamChaney]

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.

[TheRealSamChaney]

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.

[TheRealSamChaney]

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]

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

[wesleyvseth]

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

[MusaSoruklu]

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]

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

[WilliamCampolina]

I have the same problem

[Dsthdragon]

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]

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

[spock123]

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]

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]

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]

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)