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

با استفاده از Firebase Framework-Aware CLI، می توانید برنامه Angular خود را در Firebase مستقر کنید و محتوای پویا را به کاربران خود ارائه دهید.

قبل از شروع

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

Firebase را راه اندازی کنید

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

یک پروژه جدید را راه اندازی کنید

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

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

    firebase init hosting

  3. به "آیا می خواهید از چارچوب وب استفاده کنید؟ (تجربی)" بله پاسخ دهید.

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

  5. اگر از شما خواسته شد، Angular را انتخاب کنید.

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

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

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

محتوای ثابت را ارائه دهید

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

firebase deploy

محتوای پویا را از قبل رندر کنید

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

ng add @angular/ssr

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