整合 Angular

透過 Firebase 架構感知 CLI，您可以將 Angular 應用程式部署至 Firebase，並向使用者提供動態內容。

事前準備

開始將應用程式部署至 Firebase 之前，請先詳閱下列需求和選項：

• Firebase CLI 12.1.0 以上版本。請務必使用偏好的方法安裝 CLI。

• 選用：Firebase 專案已啟用計費功能 (如要使用伺服器端算繪，則必須啟用)

• 選用：AngularFire

初始化 Firebase

如要開始使用，請為架構專案初始化 Firebase。如果是新專案，請使用 Firebase CLI；如果是現有專案，請修改 firebase.json。

初始化新專案

1. 在 Firebase CLI 中，啟用網頁架構預覽功能：

   firebase experiments:enable webframeworks

2. 從 CLI 執行初始化指令，然後按照提示操作：

   firebase init hosting

3. 回答「是」來使用網路架構。(實驗功能)

4. 選擇託管來源目錄，這可以是現有的 Angular 應用程式。

5. 如果出現提示，請選擇 Angular。

初始化現有專案

在 firebase.json 中變更代管設定，改為 source 選項，而非 public 選項。例如：

{
  "hosting": {
    "source": "./path-to-your-angular-workspace"
  }
}

提供靜態內容

初始化 Firebase 後，您可以使用標準部署指令提供靜態內容：

firebase deploy

預先算繪動態內容

如要在 Angular 中預先算繪動態內容，您必須設定 Angular SSR。

ng add @angular/ssr

詳情請參閱 Angular 預先算繪 (SSG) 指南。

選用：新增伺服器模組

部署

使用 firebase deploy 部署時，Firebase 會建構瀏覽器套件、伺服器套件，並預先算繪應用程式。這些元素會部署至 Hosting 和 Cloud Functions for Firebase。

自訂部署

Firebase CLI 會假設您在 angular.json 中定義了單一應用程式，並具有正式版建構設定。

如要調整 CLI 的假設，可以使用 FIREBASE_FRAMEWORKS_BUILD_TARGET 環境變數，或新增 AngularFire 並修改 angular.json：

{
  "deploy": {
    "builder": "@angular/fire:deploy",
    "options": {
      "version": 2,
      "buildTarget": "OVERRIDE_YOUR_BUILD_TARGET"
    }
  }
}

選用：與 Firebase JS SDK 整合

在伺服器和用戶端套件中加入 Firebase JS SDK 方法時，請先檢查 isSupported()，再使用產品，以免發生執行階段錯誤。並非所有產品都支援所有環境。

選用：與 Firebase Admin SDK 整合

如果管理員套件包含在瀏覽器建構中，就會失敗，因此請考慮在伺服器模組中提供這些套件，並以選用依附元件的形式注入：

// your-component.ts
import type { app } from 'firebase-admin';
import { FIREBASE_ADMIN } from '../app.module';

@Component({...})
export class YourComponent {

  constructor(@Optional() @Inject(FIREBASE_ADMIN) admin: app.App) {
    ...
  }
}

// app.server.module.ts
import * as admin from 'firebase-admin';
import { FIREBASE_ADMIN } from './app.module';

@NgModule({
  …
  providers: [
    …
    { provide: FIREBASE_ADMIN, useFactory: () => admin.apps[0] || admin.initializeApp() }
  ],
})
export class AppServerModule {}

// app.module.ts
import type { app } from 'firebase-admin';

export const FIREBASE_ADMIN = new InjectionToken<app.App>('firebase-admin');

使用伺服器端算繪提供完全動態的內容

選用：與 Firebase 驗證整合

Firebase 部署工具可辨識網路架構，並自動使用 Cookie 同步處理用戶端和伺服器狀態。Express res.locals 物件會選擇性包含已驗證的 Firebase 應用程式例項 (firebaseApp) 和目前登入的使用者 (currentUser)。這可透過 REQUEST 符記 (從 @nguniversal/express-engine/tokens 匯出) 注入模組。