Angular を統合する

静的コンテンツを提供する

標準のデプロイ コマンドを使用して静的コンテンツを提供できます。

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');

SSR で完全な動的コンテンツを提供する

省略可: Firebase Authentication との統合

ウェブ フレームワーク対応の Firebase デプロイツールは、Cookie を使用してクライアントとサーバーの状態を自動的に同期させます。Express の res.locals オブジェクトには認証済みの Firebase アプリ インスタンス（firebaseApp）と現在ログインしているユーザー（currentUser）が含まれている場合があります。これらは REQUEST トークン（@ngglobal/express-engine/tokens からエクスポート）を介してモジュールに挿入できます。