集成 Angular 通用

借助 Firebase 框架感知 CLI，您可以將 Angular 應用程式部署到 Firebase 並向使用者提供動態內容。

在你開始之前

在開始將應用程式部署到 Firebase 之前，請查看以下要求和選項：

  • Firebase CLI 版本 12.1.0 或更高版本。確保使用您首選的方法安裝 CLI 。

  • 可選：在您的 Firebase 專案上啟用計費（如果您打算使用 SSR，則需要）

  • 可選：AngularFire

初始化 Firebase

首先，為您的框架專案初始化 Firebase。將 Firebase CLI 用於新項目，或修改現有項目的firebase.json 。

初始化一個新項目

  1. 在 Firebase CLI 中，啟用 Web 框架預覽：
    firebase experiments:enable webframeworks

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

    firebase init hosting

  3. 對“您想使用 Web 框架嗎？（實驗性）”回答“是”

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

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

初始化現有項目

更改firebase.json中的託管配置以具有source選項，而不是public選項。例如：

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

提供靜態內容

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

firebase deploy

預先渲染動態內容

要在 Angular 中預先渲染動態內容，您需要設定 Angular Universal。 Firebase CLI 需要 Express 引擎：

ng add @nguniversal/express-engine

有關更多信息，請參閱Angular 通用指南。

新增預渲染 URL

預設情況下，僅預渲染根目錄。您可以透過在angular.json中找到預先渲染步驟並新增更多路由來新增其他路由：

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

如果您需要進一步自訂，Firebase 也會考慮託管根目錄中的guessRoutes或routes.txt檔案。有關這些選項的更多信息，請參閱Angular 的預渲染指南。

可選：新增伺服器模組

部署

當您使用firebase deploy進行部署時，Firebase 會建置您的瀏覽器套件、伺服器套件並預先渲染應用程式。這些元素部署到 Firebase 的託管和雲端功能。

自訂部署

Firebase CLI 假定您的原理圖中具有生產配置的伺服器、建置和預先渲染步驟。

如果您想自訂 CLI 的假設，請配置ng deploy並編輯angular.json中的配置。例如，您可以透過刪除serverTarget來停用 SSR 並專門提供預先渲染內容：

{
  "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 身份驗證集成

Web 框架感知的 Firebase 部署工具會使用 cookie 自動保持用戶端和伺服器狀態同步。 Express res.locals物件可以選擇包含經過驗證的 Firebase 應用程式實例 ( firebaseApp ) 和目前登入的使用者 ( currentUser )。這可以透過 REQUEST 令牌（從 @nguniversal/express-engine/tokens 匯出）注入到您的模組中。