Mengintegrasikan Angular

Menayangkan konten statis

Anda dapat menayangkan konten statis dengan perintah deployment standar:

firebase deploy

Merender konten dinamis di awal

Untuk melakukan pra-render konten dinamis di Angular, Anda perlu menyiapkan Angular SSR.

ng add @angular/ssr

Lihat panduan Pra-rendering Angular (SSG) untuk mengetahui informasi selengkapnya.

Opsional: menambahkan modul server

Deploy

Ketika Anda men-deploy dengan firebase deploy, Firebase akan mem-build paket browser, paket server, dan melakukan pra-render aplikasi. Elemen ini di-deploy ke Hosting dan Cloud Functions for Firebase.

Men-deploy kustom

Firebase CLI mengasumsikan bahwa Anda memiliki satu aplikasi yang ditentukan di angular.json dengan konfigurasi build produksi.

Jika perlu menyesuaikan asumsi CLI, Anda dapat menggunakan variabel lingkungan FIREBASE_FRAMEWORKS_BUILD_TARGET atau menambahkan AngularFire dan mengubah angular.json:

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

Opsional: mengintegrasikan dengan Firebase JS SDK

Ketika Anda menyertakan metode Firebase JS SDK di paket server dan klien, jaga agar tidak terjadi error runtime dengan memeriksa isSupported() sebelum menggunakan produk. Tidak semua produk didukung di semua lingkungan.

Opsional: mengintegrasikan dengan Firebase Admin SDK

Paket admin akan gagal jika disertakan dalam build browser Anda, jadi pertimbangkan untuk menyediakannya dalam modul server dan memasukkannya sebagai dependensi opsional:

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

Menayangkan konten yang sepenuhnya dinamis dengan SSR

Opsional: mengintegrasikan dengan Firebase Authentication

Alat deployment Firebase berbasis framework web secara otomatis menyinkronkan status klien dan server menggunakan cookie. Objek res.locals Express secara opsional akan berisi instance Aplikasi Firebase yang diautentikasi (firebaseApp) dan pengguna yang sedang login (currentUser). Ini dapat dimasukkan ke dalam modul Anda melalui token REQUEST (diekspor dari @nguniversal/express-engine/tokens).