Awesome
AngularFire
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.
<strong><pre>ng add @angular/fire</pre></strong>
- 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.
Example use
import { provideFirebaseApp, initializeApp } from '@angular/fire/app';
import { getFirestore, provideFirestore } from '@angular/fire/firestore';
export const appConfig: ApplicationConfig = {
providers: [
provideFirebaseApp(() => initializeApp({ ... })),
provideFirestore(() => getFirestore()),
...
],
...
})
import { inject } from '@angular/core';
import { Firestore, collectionData, collection } from '@angular/fire/firestore';
import { Observable } from 'rxjs';
interface Item {
name: string,
...
};
@Component({
selector: 'app-root',
standalone: true,
template: `
<ul>
@for (item of (item$ | async); track item) {
<li>
{{ item.name }}
</li>
}
</ul>
`
})
export class AppComponent {
item$: Observable<Item[]>;
firestore: Firestore = inject(Firestore);
constructor() {
const itemCollection = collection(this.firestore, 'items');
this.item$ = collectionData<Item>(itemCollection);
}
}
Polyfills
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<br>Safari < 12.1<br>iOS < 12.2<br>Node < 12 | globalThis | MIT |
Proxy | Safari < 10 | proxy-polyfill | Apache 2.0 |
fetch | Safari < 10.1<br>iOS < 10.3 | cross-fetch | MIT |
Resources
Quickstart - Get your first application up and running by following our quickstart guide.
Stackblitz Template - Remember to set your Firebase configuration in app/app.module.ts
.
Upgrading to v7.0? Check out our guide.
Sample apps
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.
Having troubles?
Get help on our Q&A board, the official Firebase Mailing List, the Firebase Community Slack (#angularfire2
), the Angular Community Discord (#firebase
), Gitter, the Firebase subreddit, or Stack Overflow.
NOTE: While relatively stable, AngularFire is a developer preview and is subject to change before general availability. Questions on the mailing list and issues filed here are answered on a <strong>best-effort basis</strong> by maintainers and other community members. If you are able to reproduce a problem with Firebase <em>outside of AngularFire's implementation</em>, please file an issue on the Firebase JS SDK or reach out to the personalized Firebase support channel.
Developer Guide
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..
Firebase product integrations
<table> <tr> <td>Analytics
import { } from '@angular/fire/analytics';
</td>
<td>
Authentication
import { } from '@angular/fire/auth';
</td>
</tr>
<tr>
<td>
Cloud Firestore
import { } from '@angular/fire/firestore';
</td>
<td>
Cloud Functions
import { } from '@angular/fire/functions';
</td>
</tr>
<tr>
<td>
Cloud Messaging
import { } from '@angular/fire/messaging';
</td>
<td>
Cloud Storage
import { } from '@angular/fire/storage';
</td>
</tr>
<tr>
<td>
Performance Monitoring
import { } from '@angular/fire/performance';
</td>
<td>
Realtime Database
import { } from '@angular/fire/database';
</td>
</tr>
<tr>
<td>
Remote Config
import { } from '@angular/fire/remote-config';
</td>
<td>
App Check
import { } from '@angular/fire/app-check';
</td>
</tr>
<tr>
<td>
Vertex AI
import { } from '@angular/fire/vertexai-preview';
</td>
</tr>
</table>