角火

角火

AngularFire は、Angular 開発者がフレームワークに依存しない Firebase JS SDK を実装する際に遭遇する可能性のある問題を解決し、Angular の規約に準拠することでより自然な開発者エクスペリエンスを提供することを目指しています。

 @angular/fire を追加するのはNG

• 依存関係の注入- コンポーネントに Firebase サービスを提供して注入します。
• Zone.js ラッパー- 安定ゾーンにより、Service Worker、フォーム、SSR、およびプリレンダリングの適切な機能が可能になります。
• オブザーバブル ベース- リアルタイム ストリームのコールバックではなく RxJS を利用します。
• NgRx フレンドリーな API - AngularFire のアクションベースの API を使用して NgRx と統合します。
• 遅延読み込み- AngularFire は Firebase の大部分を動的にインポートし、アプリの読み込み時間を短縮します。
• スケマティックをデプロイする- 単一のコマンドで Angular アプリケーションを Firebase Hosting にデプロイします。
• Google Analytics - Google Analytics でのゼロエフォート Angular Router の認識。
• Router Guards - 組み込みの Firebase Authentication チェックを使用して Angular ルートを保護します。

使用例

 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 ) ;
  }
}

ポリフィル

AngularFire も Firebase もポリフィルは同梱されていません。幅広い環境間で互換性を持たせるために、次のポリフィルをアプリケーションに追加することをお勧めします。

API	環境	推奨されるポリフィル	ライセンス
ES5+ のさまざまな機能	サファリ < 10	core-js/stable	マサチューセッツ工科大学
globalThis	クロム < 71 サファリ < 12.1 iOS < 12.2 ノード < 12	globalThis	マサチューセッツ工科大学
Proxy	サファリ < 10	proxy-polyfill	アパッチ2.0
fetch	サファリ < 10.1 iOS < 10.3	cross-fetch	マサチューセッツ工科大学

リソース

クイックスタート - クイックスタート ガイドに従って、最初のアプリケーションを立ち上げて実行します。

貢献する

Stackblitz テンプレート - app/app.module.tsで Firebase 構成を設定することを忘れないでください。

v7.0 にアップグレードしますか?ガイドをご覧ください。

サンプルアプリ

このリポジトリには 3 つのサンプル アプリがあります。

1. 「互換性」API の使用をデモするキッチン シンク アプリケーションのsamples/compat
2. samples/modular新しいツリーシェイク API をデモするキッチン シンク アプリケーション
3. samples/advanced samples/modularと同じアプリですが、Angular Universal 状態転送、Firebase 機能モジュールの動的インポート、Firestore データ バンドルなどのより高度な概念を示しています。

お困りですか?

Q&A ボード、公式 Firebase メーリング リスト、Firebase コミュニティ Slack ( #angularfire2 )、Angular コミュニティ Discord ( #firebase )、Gitter、Firebase subreddit、または Stack Overflow でサポートを得てください。

注: AngularFire は比較的安定していますが、開発者プレビューであり、一般公開前に変更される可能性があります。メーリング リスト上の質問やここに提出された問題には、メンテナーや他のコミュニティ メンバーがベスト エフォート ベースで回答します。 AngularFire の実装以外でFirebase の問題を再現できる場合は、Firebase JS SDK で問題を報告するか、個別の Firebase サポート チャネルにお問い合わせください。

開発者ガイド

この開発者ガイドは、新しいツリーシェイク可能な AngularFire API を使用していることを前提としています。互換性 API を探している場合は、ここでドキュメントを見つけることができます。

この変更の詳細については、v7 アップグレード ガイドを参照してください。

Firebase製品の統合

分析 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' ;
頂点AI import { } from '@angular/fire/vertexai-preview' ;