Winkelfeuer

AngularFire

AngularFire glättet die Ecken und Kanten, auf die ein Angular-Entwickler bei der Implementierung des Framework-unabhängigen Firebase JS SDK stoßen könnte, und zielt darauf ab, durch die Einhaltung der Angular-Konventionen ein natürlicheres Entwicklererlebnis zu bieten.

 ng @angular/fire hinzufügen

• Abhängigkeitsinjektion – Stellen Sie Firebase-Dienste bereit und injizieren Sie sie in Ihre Komponenten.
• Zone.js-Wrapper – Stabile Zonen ermöglichen die ordnungsgemäße Funktionalität von Servicemitarbeitern, Formularen, SSR und Pre-Rendering.
• Observable-basiert – Nutzen Sie RxJS anstelle von Rückrufen für Echtzeit-Streams.
• NgRx-freundliche API – Integrieren Sie mit NgRx mithilfe der aktionsbasierten APIs von AngularFire.
• Lazy-Loading – AngularFire importiert einen Großteil von Firebase dynamisch und verkürzt so die Zeit zum Laden Ihrer App.
• Schaltpläne bereitstellen – Stellen Sie Ihre Angular-Anwendung mit einem einzigen Befehl auf Firebase Hosting bereit.
• Google Analytics – Angular Router-Bewusstsein in Google Analytics ohne großen Aufwand.
• Router Guards – Schützen Sie Ihre Angular-Routen mit integrierten Firebase-Authentifizierungsprüfungen.

Beispielanwendung

 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 : `
  

    @for (item of (item$ | async); track item) {
      

        {{ item.name }}
      
    }
  
  `
} )
export class AppComponent {
  item$ : Observable < Item [ ] > ;
  firestore : Firestore = inject ( Firestore ) ;

  constructor ( ) {
    const itemCollection = collection ( this . firestore , 'items' ) ;
    this . item$ = collectionData < Item > ( itemCollection ) ;
  }
}

Polyfills

Weder AngularFire noch Firebase werden mit Polyfills ausgeliefert. Um die Kompatibilität in einer Vielzahl von Umgebungen zu gewährleisten, empfehlen wir, Ihrer Anwendung die folgenden Polyfills hinzuzufügen:

API	Umgebungen	Empfohlene Polyfüllung	Lizenz
Verschiedene ES5+-Funktionen	Safari < 10	core-js/stable	MIT
globalThis	Chrom < 71 Safari < 12.1 iOS < 12.2 Knoten < 12	globalThis	MIT
Proxy	Safari < 10	proxy-polyfill	Apache 2.0
fetch	Safari < 10.1 iOS < 10.3	cross-fetch	MIT

Ressourcen

Schnellstart – Bringen Sie Ihre erste Anwendung zum Laufen, indem Sie unserer Schnellstartanleitung folgen.

Mitwirken

Stackblitz-Vorlage – Denken Sie daran, Ihre Firebase-Konfiguration in app/app.module.ts festzulegen.

Upgrade auf v7.0? Schauen Sie sich unseren Leitfaden an.

Beispiel-Apps

Wir haben drei Beispiel-Apps in diesem Repository:

1. samples/compat einer Küchenspülenanwendung, die die Verwendung der „Kompatibilitäts“-API demonstriert
2. samples/modular eine Küchenspülenanwendung, die die neue Tree-Shakable-API demonstriert
3. samples/advanced dieselbe App wie samples/modular , demonstriert jedoch fortgeschrittenere Konzepte wie Angular Universal State-Transfer, dynamisches Importieren von Firebase-Funktionsmodulen und Firestore-Datenbündelung.

Haben Sie Probleme?

Erhalten Sie Hilfe auf unserem Q&A-Board, der offiziellen Firebase-Mailingliste, dem Firebase Community Slack ( #angularfire2 ), dem Angular Community Discord ( #firebase ), Gitter, dem Firebase-Subreddit oder Stack Overflow.

HINWEIS: Obwohl AngularFire relativ stabil ist, handelt es sich um eine Entwicklervorschau und es können vor der allgemeinen Verfügbarkeit Änderungen vorgenommen werden. Fragen zur Mailingliste und hier eingereichte Probleme werden von Betreuern und anderen Community-Mitgliedern nach bestem Wissen und Gewissen beantwortet. Wenn Sie ein Problem mit Firebase außerhalb der AngularFire-Implementierung reproduzieren können, melden Sie bitte ein Problem im Firebase JS SDK oder wenden Sie sich an den personalisierten Firebase-Supportkanal.

Entwicklerhandbuch

In diesem Entwicklerhandbuch wird davon ausgegangen, dass Sie die neue Tree-Shakable-AngularFire-API verwenden. Wenn Sie nach der Kompatibilitäts-API suchen, finden Sie die Dokumentation hier.

Weitere Informationen zu dieser Änderung finden Sie im v7-Upgrade-Leitfaden.

Firebase-Produktintegrationen

Analytik import { } from '@angular/fire/analytics' ;	Authentifizierung import { } from '@angular/fire/auth' ;
Cloud Firestore import { } from '@angular/fire/firestore' ;	Cloud-Funktionen import { } from '@angular/fire/functions' ;
Cloud-Messaging import { } from '@angular/fire/messaging' ;	Cloud-Speicher import { } from '@angular/fire/storage' ;
Leistungsüberwachung import { } from '@angular/fire/performance' ;	Echtzeitdatenbank import { } from '@angular/fire/database' ;
Remote-Konfiguration import { } from '@angular/fire/remote-config' ;	App-Check import { } from '@angular/fire/app-check' ;
Vertex-KI import { } from '@angular/fire/vertexai-preview' ;