日期: 2020 年 6 月 7 日

指令如下

1.npm install -g firebase-tools

2.firebase login
註: 因前一日已有登入過，故會將登入資訊在在C:\Users\user.config\configstore\firebase-tools.json

3.在https://console.firebase.google.com/建立專案及firebase database

4.初始化firebase App
firebase init

5.firebase deploy

6.npm install firebase @angular/fire –save

7.npm install @firebase/app

8.npm install @firebase/firestore

9.將firebase console設定的網站資訊加到src/environment/environment.ts的environment.firebase區塊內

10.程式碼請參考https://github.com/yahuihuang/graceAngularApp

11.ng seve

12.http://localhost:4200/

最近新增angular cli專案時遇到幾個錯誤訊息

1.An unhandled exception occurred: C:\GWork\00_Work\graceAngularApp\graceAngularApp contains both .browserslistrc and browserslist

2.An unhandled exception occurred: Unknown browser query basedir=$(dirname "$(echo "$0" | sed -e 's. Maybe you are using
old Browserslist or made typo in query.
See “C:\Users\user\AppData\Local\Temp\ng-yaE42p\angular-errors.log" for further details.

只好執行如下，讓專案能繼續執行

1.移除.browserslistrc and browserslist相關開頭的檔案

2.移除ansi-html相關開頭的檔案

以下是新增angular app的指令，請參考

1.npm install -g @angular/cli@next

註: 因為沒加@next目前是cli 9版，會跑出更多的錯誤訊息，用next是用下一版看起來更穩定

2.ng new graceAngularApp –routing –style=scss

3.cd graceAngularApp

4.ng build –prod

註: 錯誤訊息在此處產生，故文章開頭的2項步驟在此處執行

4.ng serve

5.http://localhost:4200