Angular Firebase 構築手順

| Angular | Firebase | Google Cloud Platform |

Angular Firebase 構築手順

Firebase Hosting に Angular を統合して Firestore に接続

Angular

• project name : typea-info-service

$ npm install -g @angular/cli
$ ng new typea-info-service
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? SCSS   [ https://sass-lang.com/documentation/syntax#scss               
 ]
CREATE typea-info-service/README.md (1035 bytes)
            :
$ ng serve

Firebase

• 必要なモジュールなどを対話で選択

$ cd typea-info-service
$ firebase init

Config

• https://www.typea.info/blog/index.php/2020/04/04/firebase-hosting-firestore-release/
• Firebase Consoleの以下から取得

Config 
export const environment = {
  production: false,
  firebase: {
    apiKey: '<your-key>',
    authDomain: '<your-project-authdomain>',// {project-id}.firebaseapp.com
    databaseURL: '<your-database-URL>',// https://{project-id}.firebaseio.com 
    projectId: '<your-project-id>',
    storageBucket: '<your-storage-bucket>',// {project-id}.appspot.com
    messagingSenderId: '<your-messaging-sender-id>'
  }
};

設定の確認

• firebase.json の hosting/public デプロイ対象のフォルダを、Angularのビルド先の フォルダ(angular.json の outputPath)、distに変更する

“hosting”: {
     “public”: “dist”,

• Hostingの設定/設定解除

$ firebase target:apply hosting typea-info-service
$ firebase target:clear hosting typea-info-service

• 確認

$ firebase target
Resource targets for typea-info-service:
 
[ hosting ]
typea-info-service (typea-info-service)

Angular Fire

• https://github.com/angular/angularfire/blob/master/docs/install-and-setup.md

$ ng add @angular/fire@next
$ npm install firebase @angular/fire --save

Angular Material

• https://material.angular.io/

$ ng add @angular/material