Angular را ادغام کنید

با استفاده از رابط خط فرمان (CLI) سازگار با چارچوب Firebase، می‌توانید برنامه Angular خود را در Firebase مستقر کرده و محتوای پویا را به کاربران خود ارائه دهید.

قبل از اینکه شروع کنی

قبل از شروع به استقرار برنامه خود در Firebase، الزامات و گزینه‌های زیر را بررسی کنید:

مقداردهی اولیه فایربیس

برای شروع، Firebase را برای پروژه فریم‌ورک خود راه‌اندازی کنید. برای یک پروژه جدید از Firebase CLI استفاده کنید، یا firebase.json برای یک پروژه موجود تغییر دهید.

یک پروژه جدید را مقداردهی اولیه کنید

  1. در رابط خط فرمان Firebase ، پیش‌نمایش چارچوب‌های وب را فعال کنید: 
    firebase experiments:enable webframeworks

  2. دستور مقداردهی اولیه را از CLI اجرا کنید و سپس دستورالعمل‌ها را دنبال کنید:

    firebase init hosting

  3. به سوال «آیا می‌خواهید از یک چارچوب وب استفاده کنید؟» (آزمایشی) پاسخ مثبت دهید.

  4. دایرکتوری منبع میزبانی خود را انتخاب کنید؛ این می‌تواند یک برنامه Angular موجود باشد.

  5. در صورت درخواست، Angular را انتخاب کنید.

مقداردهی اولیه یک پروژه موجود

پیکربندی میزبانی خود را در firebase.json تغییر دهید تا به جای گزینه public ، گزینه source داشته باشید. برای مثال:

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

ارائه محتوای استاتیک

پس از مقداردهی اولیه Firebase، می‌توانید محتوای استاتیک را با دستور استاندارد Deployment ارائه دهید:

firebase deploy

پیش‌رندر محتوای پویا

برای پیش‌رندر محتوای پویا در انگولار، باید Angular SSR را راه‌اندازی کنید.

ng add @angular/ssr

برای اطلاعات بیشتر به راهنمای پیش‌رندرینگ انگولار (SSG) مراجعه کنید.

اختیاری: اضافه کردن یک ماژول سرور

استقرار

وقتی با firebase deploy مستقر می‌شوید، Firebase بسته مرورگر، بسته سرور شما را می‌سازد و برنامه را پیش‌رندر می‌کند. این عناصر در Hosting و Cloud Functions for Firebase مستقر می‌شوند.

استقرار سفارشی

رابط خط Firebase فرض می‌کند که شما یک برنامه‌ی واحد تعریف‌شده در 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 که از چارچوب وب آگاه است، به طور خودکار وضعیت کلاینت و سرور را با استفاده از کوکی‌ها همگام نگه می‌دارد. شیء Express res.locals به صورت اختیاری شامل یک نمونه Firebase App احراز هویت شده ( firebaseApp ) و کاربر فعلی وارد شده ( currentUser ) خواهد بود. این می‌تواند از طریق توکن REQUEST (که از @nguniversal/express-engine/tokens صادر شده است) به ماژول شما تزریق شود.