集成 Angular

提供静态内容

您可以使用标准部署命令来提供静态内容：

firebase deploy

预呈现动态内容

如需在 Angular 中预呈现动态内容，您需要设置 Angular SSR。

ng add @angular/ssr

如需了解详情，请参阅 Angular 预渲染 (SSG) 指南。

可选：添加服务器模块

部署

使用 firebase deploy 进行部署时，Firebase 会构建浏览器软件包和服务器软件包，并预呈现应用。这些元素会部署到 Hosting 和 Cloud Functions for Firebase。

自定义部署

Firebase CLI 会假定您在 angular.json 中使用生产 build 配置定义了一个应用。

如果您需要调整 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 集成

如果将 Admin 软件包添加到浏览器 build 中，这些软件包会执行失败，因此不妨考虑将其添加到服务器模块中，并作为可选的依赖项进行注入：

// 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 Authentication 集成

Web 框架感知型 Firebase 部署工具可以使用 Cookie 自动同步客户端和服务器的状态。可视需要在 Express res.locals 对象中添加经过身份验证的 Firebase 应用实例 (firebaseApp) 及当前登录的用户 (currentUser)。之后，可以通过 REQUEST 令牌（该令牌可从 @nguniversal/express-engine/tokens 进行导出）将这些信息注入到您的模块中。