نوفيل
الرئيسيةالكورساتالتحديات⚔️ المبارزاتالمقالاتالأدواتتغريداتالمجتمع
دخولابدأ مجاناً
الرئيسيةالكورساتالتحديات⚔️ المبارزاتالمقالاتالأدواتتغريداتالمجتمع
نوفيل

منصة تعليم البرمجة الأولى بالعربي. تعلم من الصفر حتى الاحتراف مع كورسات احترافية وتحديات ذكاء اصطناعي.

المنصة

  • الكورسات
  • التحديات
  • المقالات
  • الأدوات

الحساب

  • إنشاء حساب
  • تسجيل الدخول
  • لوحة التحكم
  • الملف الشخصي

روابط

  • سياسة الخصوصية
  • شروط الاستخدام
  • عن نوفيل
  • تواصل معنا

© 2026 نوفيل. جميع الحقوق محفوظة.

صُنع بـ في مصر

نوفيل
الرئيسيةالكورساتالتحديات⚔️ المبارزاتالمقالاتالأدواتتغريداتالمجتمع
دخولابدأ مجاناً
الرئيسيةالكورساتالتحديات⚔️ المبارزاتالمقالاتالأدواتتغريداتالمجتمع
AN

منهج Angular

دليل مرجعي شامل

كل اللغات
مدرسة البرمجة/منهج Angular /بناء التطبيق للإنتاج وتجهيزه للنشر

بناء التطبيق للإنتاج وتجهيزه للنشر

بناء مشروع أنجولرAngular CLI buildالإنتاج Productionنشر تطبيقات Angular 22.1تحسين الأداء (Optimization)

جدول مرجعي سريع

1
الأمر البرمجي / الخيارالوظيفة الأساسيةالتأثير على التطبيق النهائي
ng buildترجمة وبناء التطبيق بالكامل بالاعتماد على إعدادات الإنتاج الافتراضيةيُنتج ملفات نهائية مضغوطة ومُحسّنة (Minified) وموضوعة في مجلد dist/
--base-hrefتحديد المسار الأساسي للتطبيق على الخادم إذا لم يكن في المسار الجذرييضمن عمل الروابط والملفات بشكل صحيح إذا كان التطبيق مرفوعاً داخل مجلد فرعي
--configuration developmentبناء التطبيق باستخدام إعدادات التطوير بدلاً من الإنتاجيتيح فحص عملية البناء دون ضغط الكود أو إخفاء رسائل الخطأ لتسهيل تتبع المشاكل

الشرح

نصل الآن إلى الدرس السابع والأخير في فصل أداة سطر الأوامر (Angular CLI). بعد أن قمنا بتطوير التطبيق، توليد مكوناته، اختباره محلياً، وضبط بيئات العمل الخاصة به، حان الوقت لتحويل هذا الكود المكتوب بلغة TypeScript إلى ملفات جافاسكربت (JavaScript) بسيطة ومضغوطة يفهمها أي متصفح، ليكون التطبيق جاهزاً للرفع على خوادم الاستضافة الحقيقية.

تفصيل عملية بناء التطبيق (Production Build)

ماذا يحدث خلف الكواليس أثناء البناء؟

عند تشغيل أمر البناء في Angular 22.1، تقوم الأداة بعدة عمليات معقدة لضمان أعلى أداء، أبرزها:

الترجمة المسبقة (AOT - Ahead of Time):

تحويل قوالب الـ HTML و Angular إلى جافاسكربت أثناء عملية البناء وليس في متصفح المستخدم، مما يسرع العرض بشكل هائل.

هز الشجرة (Tree-Shaking):

فحص جميع الملفات والمكتبات وحذف أي كود أو أدوات لم يتم استخدامها فعلياً داخل التطبيق لتقليل حجم الملف النهائي.

الضغط والتشويش (Minification & Uglification):

إزالة المسافات وحذف التعليقات البرمجية، وتغيير أسماء المتغيرات لحجم أصغر لحماية الكود وتسريع تحميله.

مخرجات عملية البناء:

بمجرد انتهاء الأمر، يتم إنشاء مجلد جديد باسم dist/ (أو بالمسار المحدد في angular.json). هذا المجلد يحتوي على ملفات ثابتة (index.html، وملفات js، وملفات css)؛ وهي الملفات الوحيدة التي ستقوم برفعها إلى خادم الاستضافة (مثل Firebase، Vercel، Nginx، أو Apache).

أمثلة برمجية: تنفيذ أوامر البناء وتخصيصها

المثال الأول: البناء القياسي للإنتاج

هذا هو الأمر الذي ستستخدمه في 99% من الحالات عند الانتهاء من البرمجة:

bash
1# بناء التطبيق مع تفعيل كافة خيارات تحسين الأداء
2ng build

المثال الثاني: البناء لمسار فرعي (Sub-directory)

ℹ️ معلومة

إذا كنت سترفع التطبيق على رابط فرعي (مثلاً: [www.example.com/my-dashboard/](https://www.example.com/my-dashboard/))، يجب إخبار Angular بذلك لتصحيح مسارات الأصول:

bash
1ng build --base-href /my-dashboard/

نصائح احترافية

  • —اختبر النسخة النهائية محلياً قبل رفعها للخادم!
  • —لا تعتمد فقط على نجاح أمر ng serve، لأن بيئة الإنتاج مضغوطة ومختلفة. بعد تنفيذ أمر ng build، استخدم خادم ويب بسيط مثل http-server (يمكن تثبيته عبر npm i -g http-server) لتشغيل المجلد dist والتأكد من أن الروابط، الصور، والبيانات تعمل بكفاءة تامة قبل وصولها للمستخدمين.

الدرس السابق

إعداد وإدارة بيئات العمل

الدرس التالي

ماهي المكونات المستقله

نوفيل

منصة تعليم البرمجة الأولى بالعربي. تعلم من الصفر حتى الاحتراف مع كورسات احترافية وتحديات ذكاء اصطناعي.

المنصة

  • الكورسات
  • التحديات
  • المقالات
  • الأدوات

الحساب

  • إنشاء حساب
  • تسجيل الدخول
  • لوحة التحكم
  • الملف الشخصي

روابط

  • سياسة الخصوصية
  • شروط الاستخدام
  • عن نوفيل
  • تواصل معنا

© 2026 نوفيل. جميع الحقوق محفوظة.

صُنع بـ في مصر