DEV Community

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

Posted on • Originally published at fluin.io

3

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.

Sentry blog image

How to reduce TTFB

In the past few years in the web dev world, we’ve seen a significant push towards rendering our websites on the server. Doing so is better for SEO and performs better on low-powered devices, but one thing we had to sacrifice is TTFB.

In this article, we’ll see how we can identify what makes our TTFB high so we can fix it.

Read more

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.

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay