Angular に Firebase を導入する時の、そもそもの基本的な共通設定のしかた

概要

Firebase を利用すると、mBaas として認証機能やリアルタイムDBなど、様々なサービスを利用できるが、Angular と Firebase を連携するときには、どのサービスを利用するにしろ、いずれも共通の設定を行う必要がある。
その際の設定方法についての備忘録。
（Web アプリ開発をするときの話。ネイティブアプリに導入する時の話ではない）

前提

• Google アカウントが作成済みであること
• Google アカウントで Firebase にプロジェクトを生成済みであること
• Angular を利用する環境構築が完了していること
• Angular で Web アプリケーションの生成が完了していること

手順

1. Firebase に Web アプリを登録する

Firebase の今回利用するプロジェクトを作成し、選択してプロジェクトページを表示する。
プロジェクトページの「アプリを追加」というボタンを押下し、表示されるアイコンの中から「</>」マークを押下する。

ウェブアプリの登録フローに入るので、画面の通りに進めていく。

① 「アプリのニックネーム」を適当に決めて入力する （Firebase Hosting の設定はしなくて良い)

② 「Firebase SDK の追加」が表示されたら、一旦そこで止めておく

2. Angular の環境設定に Firebase のユーザ情報を転記

先ほどの 「Firebase SDK の追加」で表示されたスクリプトのうち、設定に関する JSON 形式の部分の { から } まで をコピーする。

Angular の環境設定ファイル (src/environments/environment.ts) に、以下のようにペーストする。

Firebase プロジェクトが「開発用」「本番用」と別れている場合は、environment.ts, environment.prod.ts にそれぞれ分けて該当内容をコピペすれば良い。

最低限の基本設定は、以上で完了。

3. Firebase モジュール導入

Firebase 公式モジュールをインストール。

npm i firebase @angular/fire

ルートモジュールに Firebase のモジュールを導入する。

src/app/app.module.ts

：
// Firebase モジュール インポート
import { AngularFireModule } from '@angular/fire'; // 追加
import { AngularFireAuthModule } from '@angular/fire/auth'; // 追加例： Firebase Authentication を使う場合
import { AngularFirestoreModule } from '@angular/fire/firestore'; // 追加例： FireStore を使う場合
：

@NgModule({
  ：
  imports: [
    ：
    AngularFireModule.initializeApp(environment.firebase), // 追加
    AngularFireAuthModule, // 追加例： Firebase Authentication を使う場合
    AngularFirestoreModule, // 追加例： FireStore を使う場合
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }