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.
angularfire github page: github.com/angular/angularfire
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

[@christiankomodo]

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

[@Victorbio1]

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

[@xyz-xc1qu]

Thanks for this tutorial!

[@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!

[@yelose85]

Thank you very much!

[@dietcoke1872]

thanks so much man. for people who are using angular17, depending when you read this, you might need to do npm install @angular/fire@next

[@klirmio21]

good. thanks!

[@adrian333dev]

Awesome content! Looking for more angular tutorials

[@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) ;-)

[@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"

[@soberstudy160]

I have the same error message... Did you manage to find out what the problem is?

[@matheusssoares04]

In your package,json file add these dependencies and the problem will be solved.
"@angular/fire": "7.6.1",
"firebase": "^9.23.0",
"rxfire": "^6.0.0"
Be happy!

[@josecarlosnunezvalverde6570]

@@soberstudy160 Example:
import { Firestore, addDoc, collection } from '@angular/fire/firestore';
ngOnInit(): void {
const testCollection = collection(this.firestore, "test");
addDoc(testCollection , { test: "Done" })
}

[@yelose85]

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.

[@HappyCoder]

your code looks correct to me. `provideFirebaseApp(() => initializeApp(firebaseConfig))` is creating the firebase app. Only thing I can think of is to make sure the type of Storage is from `import { Storage } from '@angular/fire/storage';`, and enable storage in your firebase console.

[@feeelgoood]

auth??

[@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