שילוב Angular

הצגת תוכן סטטי

אפשר להציג תוכן סטטי באמצעות פקודת הפריסה הרגילה:

firebase deploy

טרום-רינדור של תוכן דינמי

כדי לבצע טרום-עיבוד של תוכן דינמי ב-Angular, צריך להגדיר Angular SSR.

ng add @angular/ssr

מידע נוסף זמין במדריך בנושא טרום-עיבוד (SSG) ב-Angular.

אופציונלי: מוסיפים מודול שרת

כלים לפריסה

כשפורסים באמצעות firebase deploy,‏ Firebase יוצרת את חבילת הדפדפן, את חבילת השרת ומבצעת טרום-עיבוד של האפליקציה. הרכיבים האלה נפרסים ב-Hosting וב-Cloud Functions for Firebase.

פריסה בהתאמה אישית

ה-CLI של Firebase מניח שיש לכם אפליקציה אחת שמוגדרת ב-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() לפני שמשתמשים במוצר כדי למנוע שגיאות בזמן הריצה. לא כל המוצרים נתמכים בכל הסביבות.

אופציונלי: שילוב עם SDK של Firebase לאדמינים

חבילות של Admin ייכשלו אם הן ייכללו בגרסת הדפדפן שלכם, לכן מומלץ לספק אותן במודול השרת ולהוסיף אותן כתלות אופציונלית:

// 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 שמודעים למסגרת האינטרנט שומרים באופן אוטומטי על סנכרון בין מצב הלקוח לבין מצב השרת באמצעות קובצי Cookie. אובייקט Express res.locals יכול להכיל אופציונלית מופע מאומת של אפליקציית Firebase‏ (firebaseApp) ואת המשתמש שמחובר כרגע (currentUser). אפשר להחדיר את האובייקט הזה למודול באמצעות אסימון הבקשה (שיוצא מ-@nguniversal/express-engine/tokens).