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

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

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


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

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


<br />
### Angularで枠組みが出来上がったので、コンテンツ注入のためにFirebaseを導入する準備
<br />
##### まずはFirebase側


<br />
とりあえずできあがったフロント側の枠
![1553936733655.png](https://qiita-image-store.s3.amazonaws.com/0/307441/84b0cf2b-b5c9-7e2d-c620-2d849ea3bffb.png)
![1553925821326.png](https://qiita-image-store.s3.amazonaws.com/0/307441/efc080b9-dfd1-694c-5b01-954d40fa3565.png)




<br />
では、いざ。

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

ログインしたら「コンソールへ移動」をクリック
![1553926215890.png](https://qiita-image-store.s3.amazonaws.com/0/307441/882b5f41-ae7a-a83d-b336-374f3fea2060.png)


<br />
プロジェクトを追加をクリック
![1553926326547.png](https://qiita-image-store.s3.amazonaws.com/0/307441/b12bd076-c1f0-13b7-a197-4b34e7e34756.png)



<br />
プロジェクト名を入力して、地域は日本、ロケーションはasia-northeast1にする。
![1553926470974.png](https://qiita-image-store.s3.amazonaws.com/0/307441/185030ff-5e95-3ce7-b956-f515c9990531.png)




<br />
測定管理者用なんちゃらをチェックしてプロジェクトを作成ボタンをクリック
![1553926561976.png](https://qiita-image-store.s3.amazonaws.com/0/307441/37de2e97-7988-ac71-b2e9-f2e71afd9667.png)



<br />
作成されると自動的に作成されたプロジェクトの管理画面に飛ぶ。
開発 ― Authentication をクリックするとウェブ設定ボタンが右上に表れるのでクリック。
![1553926747249.png](https://qiita-image-store.s3.amazonaws.com/0/307441/b39f5553-ad75-c4bb-d989-47f51846c1ec.png)




<br />
こんなのが出てくるのでコピーしてメモ帳にでも保存しておく。
![1553926844399.png](https://qiita-image-store.s3.amazonaws.com/0/307441/e1562371-76b8-7c52-4bd0-a6a493b95d7e.png)



<br />
<br />

##### そしたらAngular側

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

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


<br />
したらFirebase CLIでログイン

```cmd
C:\projects\projectA>firebase login
```

<br />

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

![Firebase CLI.png](https://camo.qiitausercontent.com/271edb90991f952bf33a316b03ba8abcaef5e5e3/68747470733a2f2f71696974612d696d6167652d73746f72652e73332e616d617a6f6e6177732e636f6d2f302f3131323536362f65663737666637322d646130392d633531342d303232612d3338386134613565383232662e706e67)



<br />

したら次のコマンドでangularfireをインストール。

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

<br />

environment/environment.tsを開いて、ウェブ設定ボタンで取得した情報を次のように入力。カンマを忘れるな。`<script src="https://www.gstatic.com/firebasejs/5.9.2/firebase.js">`云々のフレーズ部分はいらない。（AngularでなくJavaScriptでナマで作るときに必要になるのであろう。たぶん。）
![1553927843234.png](https://qiita-image-store.s3.amazonaws.com/0/307441/ed1dceee-04ff-d636-af84-f2234125040b.png)



<br />
app.module.tsを開いてAngularFireModuleとenvironmentをインポートするよう記述。どうせFirestoreや認証機能も使うのでこの場で追記してしまう。
![1553928393203.png](https://qiita-image-store.s3.amazonaws.com/0/307441/d6ece907-a110-09dd-9f2b-7695c68c56ec.png)
![1553928439496.png](https://qiita-image-store.s3.amazonaws.com/0/307441/4239bf81-2072-72c2-9ba8-6468cb72ca14.png)





<br />

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

```cmd
ERROR in : TypeError: Cannot read property 'externalModuleIndicator' of undefined....
```
![1553928336089.png](https://qiita-image-store.s3.amazonaws.com/0/307441/c59c8226-a109-4365-1331-76ab518d89d2.png)


<br />

こういう時もある。そしたらめげずにもう一度`ng serve -o`。
![1553936733655.png](https://qiita-image-store.s3.amazonaws.com/0/307441/cdb7d2fe-a838-0ec3-382f-f691dbb514c4.png)


<br />



良し。

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



以上。