Angular Academy · درس

Native Federation لـ Angular

اضبط اتحاد الوحدات في Angular

الدرس 2 من 413 خطوة

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

لماذا Native Federation

كانت Module Federation التقليدية مرتبطة بـ webpack. وانتقل نظام بناء Angular إلى esbuild، لذلك أنشأ المجتمع Native Federation: تنفيذًا للفكرة نفسها مستقلًا عن أداة البناء، ومبنيًا على معايير الويب (خرائط الاستيراد ووحدات ES).

الحزمة

توجد Native Federation الخاصة بـ Angular في @angular-architects/native-federation. أضيفوها باستخدام مخطط Angular CLI، الذي يهيئ الإعدادات وعملية البناء.

ng add @angular-architects/native-federation

تهيئة مضيف

شغّلوا المخطط على تطبيق الـ shell واختاروا dynamic-host. سيُنشئ الملف federation.config.js ويحدّث عملية bootstrap لتهيئة federation قبل بدء Angular.

ng g @angular-architects/native-federation:init --project shell --type dynamic-host

تهيئة remote

بالنسبة إلى تطبيق ميزة، شغّلوا عملية التهيئة نفسها مع remote. يؤدي ذلك إلى إنشاء الإعداد الذي يعرِض أجزاء من الـ remote للمضيفين.

ng g @angular-architects/native-federation:init --project catalog --type remote --port 4201

الملف federation.config.js

هذا الإعداد هو جوهر federation: فهو يسمّي الـ remote، ويحدّد ما يعرِضه عبر exposes، ويصرّح بالاعتماديات shared.

// catalog/federation.config.js
module.exports = withNativeFederation({
  name: 'catalog',
  exposes: { './Routes': './src/app/catalog.routes.ts' },
  shared: { ...shareAll({ singleton: true }) },
});

تغييرات Bootstrap

تتطلب Native Federation التهيئة قبل bootstrap حتى تصبح خرائط الاستيراد جاهزة. ويقسّم المخطط main.ts إلى خطوة تهيئة تحمّل bootstrap.ts.

// main.ts
import { initFederation } from '@angular-architects/native-federation';
initFederation()
  .then(() => import('./bootstrap'))
  .catch(err => console.error(err));

إدراج الـ remotes في المضيف

يحتفظ المضيف ببيان يربط أسماء الـ remotes بعنوان URL الخاص بـ remoteEntry.json، لكي يعرف مكان جلب كل remote وقت التشغيل.

// federation.manifest.json
{
  "catalog": "http://localhost:4201/remoteEntry.json"
}

تحميل البيان

مرّروا مسار البيان إلى initFederation. يقرأه المضيف مرة واحدة عند بدء التشغيل، ثم يستطيع تحميل أي remote مُدرج عند الطلب.

initFederation('/assets/federation.manifest.json')
  .then(() => import('./bootstrap'));

مبني على المعايير، وليس مقيدًا بـ webpack

نظرًا إلى أن Native Federation تستخدم وحدات ES الأصلية وخرائط الاستيراد، فهي تعمل مع esbuild وVite وأدوات التجميع الأخرى. وهذا الفصل هو سبب تحولها إلى النهج الموصى به في Angular الحديث.

خوادم تطوير لكل remote

أثناء التطوير، يعمل كل remote على منفذ خاص به (ng serve --port 4201). ويشير المضيف إلى عناوين URL هذه عبر البيان، مما يتيح لكم تشغيل التركيبة كاملةً محليًا.

ما الذي توفره Native Federation

باختصار: عمليات بناء مستقلة، وSingletons مشتركة (نسخة واحدة من Angular)، وتحميل ديناميكي للـ remotes، وعدم الارتباط بأداة تجميع محددة. وتتناول الدروس التالية مشاركة الاعتماديات وتحميل الوحدات البعيدة بالتفصيل.

تحقق سريع

لماذا نختار Native Federation بدلًا من Module Federation التقليدية في Angular؟

أجب عليها في الدرس التفاعلي

مراجعة

تجلب Native Federation (@angular-architects/native-federation) مفهوم module federation إلى Angular القائم على esbuild باستخدام خرائط الاستيراد. هيّئوا المضيفين والـ remotes بالمخطط، واضبطوا exposes وshared في federation.config.js، واستدعوا initFederation قبل bootstrap، وأدرجوا الـ remotes في بيان.

البدء مجانًا

تعلم HTML مع معلم ذكاء اصطناعي — مجانًا

اكتب وقم بتشغيل أكوادك الفعلية في المتصفح، واحصل على مساعدة فورية من معلم ذكاء اصطناعي متاح 24/7، واستمر من حيث توقفت على الويب أو في التطبيق.

الدورات: 38
الدروس: 144

ابدأ التعلم مجانًا عرض الدورة الكاملة

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

هل درس «Native Federation لـ Angular» مجاني؟

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

ماذا ستتعلم في «Native Federation لـ Angular»؟

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

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

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

كم من الوقت يستغرق درس «Native Federation لـ Angular»؟

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

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

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

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

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