整合 Angular Universal

有了 Firebase 架構感知 CLI，您就能部署 Angular 應用程式 並向使用者提供動態內容。

事前準備

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

  • Firebase CLI 12.1.0 以上版本。請務必 安裝 CLI 即可直接存取所需資料

  • 選用：已啟用 Firebase 專案的計費功能 (如要使用 SSR，此為必要參數)

  • 選用：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 後，您就能按照標準將靜態內容提供 「get deployment」指令：

firebase deploy

預先轉譯動態內容

如要在 Angular 中預先轉譯動態內容，請設定 Angular Universal。 Firebase CLI 預期 Express Engine：

ng add @nguniversal/express-engine

請參閱 Angular 通用指南 瞭解詳情

新增預先算繪網址

根據預設，系統只會預先算繪根目錄。若要新增 路徑，方法是在 angular.json 中找出預先算繪步驟，並新增更多路徑：

{
  "prerender": {
    "builder": "@nguniversal/builders:prerender",
    "options": {
      "routes": ["/", "ANOTHER_ROUTE", "AND_ANOTHER"]
    },
    "configurations": {
      /* ... */
    },
    "defaultConfiguration": "production"
  }
}

Firebase 也會遵循代管根目錄中的 guessRoutes 或 routes.txt 檔案。 如果需要進一步自訂請參閱 Angular 的預先算繪功能 指南，進一步瞭解這些 只要設定成「自動重新啟動」 和「在主機維護期間」選項即可

選用：新增伺服器模組

部署

使用 firebase deploy 部署時，Firebase 會建構你的瀏覽器套件。 並預先轉譯應用程式這些元素 傳送至 Hosting 和 Cloud Functions for Firebase。

自訂部署

Firebase CLI 假設您有伺服器、建構和預先轉譯步驟 建立整體架構

如要自訂 CLI 的假設，請設定 ng deploy 並編輯 與 angular.json 的設定例如停用 SSR 並放送 移除 serverTarget 專屬的預先算繪內容：

{
  "deploy": {
    "builder": "@angular/fire:deploy",
    "options": {
      "browserTarget": "app:build:production",
      "serverTarget": "app:server:production",
      "prerenderTarget": "app:prerender:production"
    }
  }
}

選用：整合 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');

使用 SSR 提供完整動態內容

選用：整合 Firebase 驗證

網路架構感知 Firebase 部署工具會自動保護用戶端 以及伺服器狀態Express res.locals 物件將 視需要包含經過驗證的 Firebase 應用程式執行個體 (firebaseApp)，以及 目前登入的使用者 (currentUser)。您可以在 擷取自 REQUEST 權杖 (從 @nguniversal/express-engine/tokens 匯出)。