Angular Academy · درس

تحميل الوحدات البعيدة

حمّل الواجهات الأمامية المصغّرة البعيدة ديناميكيًا

تحميل الوحدات البعيدة درس مجاني في Angular Academy على CoddyKit. هذا هو الدرس 4 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Angular Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Angular Academy 4 دروس في المجموع.

استدعاء remote وقت التشغيل

بمجرد أن يعرِض remote وحدةً ويعرف المضيف عنوان URL الخاص بها، يحمّلها المضيف عند الطلب باستخدام loadRemoteModule. وهذا استيراد ديناميكي عبر HTTP؛ فلا يُضمَّن أي جزء من remote في بناء المضيف.

واجهة loadRemoteModule البرمجية

تأخذ loadRemoteModule اسم الـ remote (من البيان) والمفتاح المعرَّض (من exposes الخاص بالـ remote). وتعيد وعدًا بهذه الوحدة.

import { loadRemoteModule } from '@angular-architects/native-federation';

const m = await loadRemoteModule('catalog', './Routes');

التحميل الكسول لمسارات remote

يعرِض النمط الأنظف ملف مسارات من كل remote ويحمّله تحميلًا كسولًا في موجّه المضيف باستخدام loadChildren، بحيث لا يُحمّل remote إلا عند زيارة مساره.

export const routes: Routes = [
  {
    path: 'catalog',
    loadChildren: () =>
      loadRemoteModule('catalog', './Routes').then(m => m.CATALOG_ROUTES),
  },
];

تحميل مكوّن واحد

يمكنكم أيضًا تعريض مكوّن مستقل واحد وتحميله، وهو أمر مفيد لتضمين عنصر واجهة بدلًا من منطقة مسارات كاملة.

{
  path: 'widget',
  loadComponent: () =>
    loadRemoteModule('dashboard', './Widget').then(m => m.WidgetComponent),
}

التعريض من جهة remote

لكي يتمكن المضيف من تحميله، يجب أن يدرج remote التصدير في خريطة exposes الخاصة به. والمفتاح هو ما يمرّره المضيف إلى loadRemoteModule.

// remote federation.config.js
exposes: {
  './Routes': './src/app/catalog.routes.ts',
  './Widget': './src/app/widget.component.ts',
}

الحل الديناميكي للبيان

بما أن المضيف يقرأ البيان عند بدء التشغيل، يمكنكم تبديل عناوين URL الخاصة بالـ remotes حسب البيئة (التطوير والاختبار والإنتاج) من دون إعادة بناء المضيف، وذلك بمجرد توزيع ملف بيان مختلف.

معالجة أعطال التحميل

تُحمّل الـ remotes عبر الشبكة وقد يفشل تحميلها (بسبب عدم الاتصال أو وجود عملية نشر جارية). غلّفوا عمليات التحميل بمعالجة للأخطاء حتى لا يؤدي remote واحد معطّل إلى تعطل الـ shell بأكمله.

loadRemoteModule('catalog', './Routes')
  .then(m => m.CATALOG_ROUTES)
  .catch(() => import('./fallback.routes').then(m => m.FALLBACK_ROUTES));

تمرير البيانات عبر الحدود

يتم الاتصال بين المضيف والـ remote باستخدام خدمات Singleton مشتركة أو الموجّه، وليس عبر عمليات الاستيراد المباشر. وتتيح خدمة مصادقة مشتركة (Singleton) للـ remote قراءة المستخدم الحالي الذي حدّده المضيف.

الإصدارات والعقود

يشكّل المفتاح المعرَّض (مثل ./Routes) وبنيته عقدًا. وقد يؤدي تغيير بنية التصدير إلى تعطيل المضيفين الذين يحمّلونه، لذلك تعاملوا مع الوحدات المعرَّضة باعتبارها API عامة وأديروا إصداراتها بعناية.

استراتيجيات التحميل المسبق

يمكنكم تحميل remote مسبقًا بعد خمول التطبيق لجعل التنقل اللاحق فوريًا، مع الحفاظ في الوقت نفسه على خفة التحميل الأولي. ويحقق ذلك توازنًا بين سرعة بدء التشغيل وسرعة التنقل المتصوَّرة.

التدفق من البداية إلى النهاية

للتذكير بمسار التنفيذ: يقرأ المضيف البيان، وينتقل المستخدم إلى مسار اتحادي، ويجلب loadRemoteModule ملف remoteEntry.json الخاص بالوحدة البعيدة، ويُعاد استخدام الوحدات المفردة المشتركة، ثم تُعرض مسارات ومكوّنات الوحدة البعيدة داخل غلاف المضيف.

تحقق سريع

كيف يحمّل المضيف ميزة بعيدة بشكل كسول؟

مراجعة

يحمّل المضيف الوحدات البعيدة أثناء التشغيل باستخدام loadRemoteModule(name, key)، وعادةً داخل loadChildren/loadComponent للمسارات الكسولة. يجب أن تكشف الوحدات البعيدة المفتاح باستخدام expose؛ ويحدّد البيان عناوين URL لكل بيئة. عالج حالات فشل التحميل بسلاسة، وتواصل عبر الوحدات المفردة المشتركة، وتعامل مع الوحدات المكشوفة باعتبارها عقودًا ذات إصدارات.

الأسئلة الشائعة

هل درس «تحميل الوحدات البعيدة» مجاني؟

نعم — نص درس «تحميل الوحدات البعيدة» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Angular Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Angular Academy 4 دروس في المجموع.

ماذا ستتعلم في «تحميل الوحدات البعيدة»؟

حمّل الواجهات الأمامية المصغّرة البعيدة ديناميكيًا تتمرن على Angular Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ Angular Academy؟

لا تُشترط خبرة سابقة. Angular Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 4 من أصل 4.

كم من الوقت يستغرق درس «تحميل الوحدات البعيدة»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس Angular Academy هذا؟

نعم. كل درس في Angular Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى Angular Academy