How to integrate Angularfire (Angular binding for firebase) into a standalone Angular project

In today's video, we dicuss how to integrate Angularfire (the official Angular binding for firebase) into a standalone Angular project.

0:00 intro
0:45 creating a new standlone Ng project
2:17 creating a new firebase project with the firebase console
3:45 using the firebase-tools cli to init firebase related files
5:14 enabling services in firebase console for local setup to complete
6:00 complete firebase cli init process
7:40 integrating angularfire with the ng add command
10:00 adding firebase related providers by hand
13:38 hardcode logic to write document to cloud firestore

#angular #angularfire #firebase

[dbhaduri]

better than the official docs. thanks!

[Victorbio]

Thanks man! I've been difficult to implement a Crud in angular 17, and now, does work! Tanks!

[christiankomodo]

Excellent video man, just what I needed! The Standalone style is a pain and this makes it a lot easier!

[christiankomodo]

"I hate to repeat myself" - ok it's ok believe me! I want to follow along and I might fall off if I don't know the thing you are talking about so please do repeat yourself whenever you want, we appreciate it!

[Shapuleto]

Awesome tutorial, I am very new in Agular and this just made my day. Any tutorial or another video in how to recover data from the server (a "get", not only a "put" tutorial, I am old school php) ;-)

[ohmegatech]

What angular version are you using? I updated from 16 to 18 and it broke angular fire

[adriandev]

Awesome content! Looking for more angular tutorials

[birigu]

How should I go about fixing this error? Would you mind helping? "FirebaseError: Expected first argument to collection() to be a CollectionReference, a DocumentReference or FirebaseFirestore"

[yelose]

I have a question. What have you done to prevent the error Uncaught (in promise): FirebaseError: Firebase: No Firebase App '[DEFAULT]' has been created - call initializeApp() first (app/no-app).
FirebaseError: Firebase: No Firebase App '[DEFAULT]' has been created - call initializeApp() first (app/no-app).

It accours when you try to inject the storage in your component.

export const appConfig: ApplicationConfig = {
providers: [
provideRouter(routes),
provideAnimations(),
importProvidersFrom(
provideFirebaseApp(() => initializeApp(firebaseConfig)),
provideFirestore(() => getFirestore()),
provideStorage(() => getStorage())
),
],
};

only if I add this private fireStorage: Storage to the constructor, if I remove it, the app works.

[Sohneg]

For this day you can use angular/fire to set it up. But for some reason i have to delete the locationId in app.config.ts to get it so work