دمج Angular

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

قبل البدء

قبل البدء في نشر تطبيقك على Firebase، راجِع المتطلبات والخيارات التالية:

• الإصدار 12.1.0 أو إصدار أحدث من Firebase CLI احرص على تثبيت واجهة سطر الأوامر باستخدام الطريقة المفضّلة لديك.

• اختياري: تفعيل الفوترة في مشروعك على Firebase (مطلوب إذا كنت تخطّط لاستخدام SSR)

• اختياري: AngularFire

إعداد Firebase

للبدء، عليك إعداد Firebase لمشروع إطار العمل. استخدِم واجهة سطر الأوامر Firebase لمشروع جديد، أو عدِّل firebase.json لمشروع حالي.

بدء مشروع جديد

1. في واجهة سطر الأوامر Firebase، فعِّل معاينة أُطر الويب:

   firebase experiments:enable webframeworks

2. نفِّذ أمر التهيئة من واجهة سطر الأوامر ثم اتّبِع التعليمات:

   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 (إنشاء المواقع الإلكترونية الثابتة) للحصول على مزيد من المعلومات.

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

نشر

عند النشر باستخدام firebase deploy، ينشئ Firebase حزمة المتصفّح وحزمة الخادم، ويُجري العرض المسبق للتطبيق. يتم نشر هذه العناصر في Hosting وCloud Functions for Firebase.

نشر مخصّص

يفترض Firebase CLI أنّ لديك تطبيقًا واحدًا محدّدًا في angular.json مع إعدادات إصدار الإنتاج.

إذا كنت بحاجة إلى تخصيص الافتراضات في واجهة سطر الأوامر، يمكنك استخدام متغير البيئة FIREBASE_FRAMEWORKS_BUILD_TARGET أو إضافة AngularFire وتعديل angular.json:

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

اختياري: الدمج مع حزمة تطوير البرامج (SDK) لمنصة Firebase بلغة JavaScript

عند تضمين طرق Firebase JS SDK في حِزم الخادم والعميل، احرص على تجنُّب أخطاء وقت التشغيل من خلال التحقّق من isSupported() قبل استخدام المنتج. لا تتوافق بعض المنتجات مع بعض البيئات.

اختياري: الدمج مع حزمة تطوير البرامج (SDK) الإدارية في Firebase

ستتعذّر حِزم المشرفين إذا تم تضمينها في إصدار المتصفّح، لذا ننصحك بتوفيرها في وحدة الخادم وإدخالها كعنصر اختياري:

// 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 تلقائيًا على مزامنة حالة العميل والخادم باستخدام ملفات تعريف الارتباط. سيتضمّن العنصر Express res.locals اختياريًا مثيلاً مصادقًا لتطبيق Firebase ‏ (firebaseApp) والمستخدم الذي سجّل الدخول حاليًا (currentUser). ويمكن إدخال ذلك في الوحدة النمطية من خلال رمز REQUEST المميز (الذي تم تصديره من ‎ @nguniversal/express-engine/tokens).