DEV Community

Cover image for I give up on AngularFire
Stephen Fluin
Stephen Fluin

Posted on • Originally published at fluin.io

I give up on AngularFire

I just worked really hard to rip AngularFire (@angular/fire) out of my codebase.

If you don't know, AngularFire used to be awesome. This was best around 2019-2020, but after being under-served and failing to fully finish several migrations (the Firebase SDK now uses a modular approach), it's kind of a mess.

I tried and failed to update from v6 up to v16, v17, and beyond, because I wanted to use Angular 18. This didn't work (ng update would refuse to update to v16 because it forces only updating one major at a time, which is a bit silly), so I ended up deciding to rip it out.

Steps to remove

  • Remove @angular/fire from your package.json
  • Swap out the AngularFireModulesfor your own keys
providers: [
  { provide: BUCKET, useValue: '...'},
  { provide: FIREBASE_APP, useFactory: () => initializeApp({...})}
Enter fullscreen mode Exit fullscreen mode
  • Create a service that calls initializeApp from firebase/app and save yourFirebaseApp. constructor(@Inject(FIREBASE_APP) private fbApp: FirebaseApp) { `
  • Create (or use the same) a service for each of the Firebase modules you want to use, and then get a persistent handle on the service you want. typescript db = getDatabase(this.fbApp); storage = getStorage(this.fbApp); auth = getAuth(this.fbApp);

Here's the commit on the fluin.io repo.

Top comments (1)

Collapse
 
ezequieltejada profile image
Ezequiel E. Tejada

I just saw your implementation and found it pretty clear. I haven't had any trouble with AngularFire so far, however, I found its documentation not quite clear. Also, given how clear you commit is, I don't see the benefit to have another dependency when we can achieve the same without much hassle.