AngularFire smooths over the rough edges an Angular developer might encounter when implementing the framework-agnostic Firebase JS SDK& aims to provide a more natural developer experience by conforming to Angular conventions.
ng add @angular/fire
- Dependency injection- Provide and Inject Firebase services in your components.
- Zone.js wrappers- Stable zones allow proper functionality of service workers, forms, SSR, and pre-rendering.
- Observable based- Utilize RxJS rather than callbacks for real-time streams.
- NgRx friendly API- Integrate with NgRx using AngularFire's action based APIs.
- Lazy-loading- AngularFire dynamically imports much of Firebase, reducing the time to load your app.
- Deploy schematics- Get your Angular application deployed on Firebase Hosting with a single command.
- Google Analytics- Zero-effort Angular Router awareness in Google Analytics.
- Router Guards- Guard your Angular routes with built-in Firebase Authentication checks.
import{provideFirebaseApp,initializeApp}from'@angular/fire/app';
import{getFirestore,provideFirestore}from'@angular/fire/firestore';
exportconstappConfig:ApplicationConfig={
providers:[
provideFirebaseApp(()=>initializeApp({...})),
provideFirestore(()=>getFirestore()),
...
],
...
})
import{inject}from'@angular/core';
import{Firestore,collectionData,collection}from'@angular/fire/firestore';
import{Observable}from'rxjs';
interfaceItem{
name:string,
...
};
@Component({
selector:'app-root',
standalone:true,
template:`
<ul>
@for (item of (item$ | async); track item) {
<li>
{{ item.name }}
</li>
}
</ul>
`
})
exportclassAppComponent{
item$:Observable<Item[]>;
firestore:Firestore=inject(Firestore);
constructor(){
constitemCollection=collection(this.firestore,'items');
this.item$=collectionData<Item>(itemCollection);
}
}
Neither AngularFire nor Firebase ship with polyfills. To have compatibility across a wide-range of environments, we suggest the following polyfills be added to your application:
API | Environments | Suggested Polyfill | License |
---|---|---|---|
Various ES5+ features | Safari < 10 | core-js/stable |
MIT |
globalThis |
Chrome < 71 Safari < 12.1 iOS < 12.2 Node < 12 |
globalThis |
MIT |
Proxy |
Safari < 10 | proxy-polyfill |
Apache 2.0 |
fetch |
Safari < 10.1 iOS < 10.3 |
cross-fetch |
MIT |
Quickstart- Get your first application up and running by following our quickstart guide.
Stackblitz Template- Remember to set your Firebase configuration inapp/app.module.ts
.
Upgrading to v7.0? Check out our guide.
We have three sample apps in this repository:
samples/compat
a kitchen sink application that demonstrates use of the "compatibility" APIsamples/modular
a kitchen sink application that demonstrates the new tree-shakable APIsamples/advanced
the same app assamples/modular
but demonstrates more advanced concepts such as Angular Universal state-transfer, dynamically importing Firebase feature modules, and Firestore data bundling.
Get help on ourQ&A board,the officialFirebase Mailing List,theFirebase Community Slack(#angularfire2
), theAngular Community Discord(#firebase
),Gitter,theFirebase subreddit,orStack Overflow.
NOTE:While relatively stable, AngularFire is adeveloper previewand is subject to change before general availability. Questions on the mailing list and issues filed here are answered on abest-effort basisby maintainers and other community members. If you are able to reproduce a problem with Firebaseoutside of AngularFire's implementation,pleasefile an issue on the Firebase JS SDKor reach out to the personalizedFirebase support channel.
This developer guide assumes you're using the new tree-shakable AngularFire API,if you're looking for the compatibility API you can find the documentation here.
See the v7 upgrade guide for more information on this change..
import{}from'@angular/fire/analytics'; |
import{}from'@angular/fire/auth'; |
import{}from'@angular/fire/firestore'; |
import{}from'@angular/fire/functions'; |
import{}from'@angular/fire/messaging'; |
import{}from'@angular/fire/storage'; |
import{}from'@angular/fire/performance'; |
import{}from'@angular/fire/database'; |
import{}from'@angular/fire/remote-config'; |
import{}from'@angular/fire/app-check'; |
import{}from'@angular/fire/vertexai-preview'; |