AngularプロジェクトにFirebaseを導入設定①

前回に続き絶対忘れるにきまってるので作成中のAngularプロジェクトにFirebaseを導入する方法を備忘録。

参考：[AngularのプロジェクトにFirebaseを導入する]https://qiita.com/Yamamoto0525/items/437a2884c0c51f5a3af8

[Firebaseの環境構築]https://qiita.com/Yamamoto0525/items/fb23707831ff6d181544

Angularで枠組みが出来上がったので、コンテンツ注入のためにFirebaseを導入する準備

まずはFirebase側

とりあえずできあがったフロント側の枠

では、いざ。

https://firebase.google.com/へGO! Googleアカウントでログインする。

ログインしたら「コンソールへ移動」をクリック

プロジェクトを追加をクリック

プロジェクト名を入力して、地域は日本、ロケーションはasia-northeast1にする。

測定管理者用なんちゃらをチェックしてプロジェクトを作成ボタンをクリック

作成されると自動的に作成されたプロジェクトの管理画面に飛ぶ。
開発 ― Authentication をクリックするとウェブ設定ボタンが右上に表れるのでクリック。

こんなのが出てくるのでコピーしてメモ帳にでも保存しておく。

そしたらAngular側

プロジェクトフォルダに行って、次のコマンドでFirebase CLIをインストール

C:\projects\projectA>npm install -g firebase-tools

したらFirebase CLIでログイン

C:\projects\projectA>firebase login

Googleアカウントの認証画面に遷移。
FirebaseCLIのアクセス許可をすると、次の画面が表示されログインが完了

C:\projects\projectA>npm install firebase @angular/fire --save

environment/environment.tsを開いて、ウェブ設定ボタンで取得した情報を次のように入力。カンマを忘れるな。<script src="https://www.gstatic.com/firebasejs/5.9.2/firebase.js">云々のフレーズ部分はいらない。（AngularでなくJavaScriptでナマで作るときに必要になるのであろう。たぶん。）

app.module.tsを開いてAngularFireModuleとenvironmentをインポートするよう記述。どうせFirestoreや認証機能も使うのでこの場で追記してしまう。

したら・・・ギャー。コンパイルエラー。

ERROR in : TypeError: Cannot read property 'externalModuleIndicator' of undefined....

こういう時もある。そしたらめげずにもう一度ng serve -o。

良し。

見た目は変わってないがFirebaseを使う準備完了。
次からFirestoreを使用する。

以上。