دمج Angular

عرض المحتوى الثابت

يمكنك عرض المحتوى الثابت باستخدام أمر النشر العادي:

firebase deploy

العرض المسبق للمحتوى الديناميكي

للعرض المسبق للمحتوى الديناميكي في Angular، عليك إعداد العرض من جهة الخادم (SSR) في Angular.

ng add @angular/ssr

راجِع دليل العرض المسبق في Angular (إنشاء المواقع الثابتة) لمزيد من المعلومات.

اختياري: إضافة وحدة خادم

نشر

عند النشر باستخدام 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');

عرض المحتوى الديناميكي بالكامل باستخدام العرض من جهة الخادم

اختياري: التكامل مع "مصادقة Firebase"

تحافظ أدوات نشر Firebase المتوافقة مع أُطر الويب تلقائيًا على حالة العميل والخادم متزامنة باستخدام ملفات تعريف الارتباط. سيحتوي عنصر res.locals في Express اختياريًا على مثيل معتمَد من تطبيق Firebase ‏ (firebaseApp) والمستخدم الذي سجّل الدخول حاليًا (currentUser). ويمكن إضافة ذلك إلى وحدتك من خلال رمز REQUEST (الذي تم تصديره من @nguniversal/express-engine/tokens).