دمج Angular Universal

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

قبل البدء

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

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

• اختياري: تفعيل الفوترة في مشروع 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 Universal. يتوقع واجهة سطر الأوامر في Firebase ما يلي: Express Engine:

ng add @nguniversal/express-engine

راجِع دليل Angular Universal للحصول على مزيد من المعلومات.

إضافة عناوين URL للعرض المُسبَق

وسيتم تلقائيًا عرض الدليل الجذر فقط مسبقًا. يمكنك إضافة مسارات إضافية من خلال تحديد موقع خطوة العرض المُسبَق في "angular.json" وإضافة المزيد من المسارات:

{
  "prerender": {
    "builder": "@nguniversal/builders:prerender",
    "options": {
      "routes": ["/", "ANOTHER_ROUTE", "AND_ANOTHER"]
    },
    "configurations": {
      /* ... */
    },
    "defaultConfiguration": "production"
  }
}

ويراعي Firebase أيضًا الملف guessRoutes أو routes.txt في جذر الاستضافة، إذا كنت بحاجة إلى مزيد من التخصيص. يمكنك الاطّلاع على دليل العرض المُسبَق في Angular للحصول على مزيد من المعلومات حول هذه الخيارات.

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

النشر

عند النشر باستخدام firebase deploy، ينشئ Firebase حِزمة المتصفِّح وحزمة الخادم ويعرض التطبيق مسبقًا. يتم نشر هذه العناصر في وظائف الاستضافة ووظائف السحابة الإلكترونية لبرنامج Firebase

التفعيل المخصص

يفترض واجهة سطر الأوامر في Firebase أن لديك خطوات متعلقة بالخادم والإصدار والعرض المسبق في مخططاتك من خلال ضبط الإنتاج.

إذا كنت تريد ضبط افتراضات واجهة سطر الأوامر، يمكنك ضبط ng deploy وتعديل الإعدادات في angular.json. على سبيل المثال، يمكنك إيقاف SSR وعرض المحتوى المعروض مسبقًا حصريًا من خلال إزالة serverTarget:

{
  "deploy": {
    "builder": "@angular/fire:deploy",
    "options": {
      "browserTarget": "app:build:production",
      "serverTarget": "app:server:production",
      "prerenderTarget": "app:prerender:production"
    }
  }
}

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

عند تضمين طرق حزمة JavaScript JS من Firebase في حِزم الخادم والعميل، يجب الحماية من الأخطاء في وقت التشغيل من خلال فحص 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');

عرض محتوى ديناميكي بالكامل من خلال منصة الخدمة الذاتية (SSR)

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

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