| المفتاح الأساسي (Key) | الوظيفة الأساسية | الاستخدام الشائع |
|---|---|---|
| projects | يحتوي على إعدادات كل تطبيق أو مكتبة متواجدة داخل مساحة العمل (Workspace) | التحكم في إعدادات مشروعك الأساسي بشكل منعزل عن المشاريع الأخرى |
| architect.build | يتحكم في خيارات الترجمة والبناء (Build Target) | إضافة ملفات CSS العالمية أو السكربتات (Scripts) وملفات الصور (Assets) |
| architect.serve | يدير إعدادات خادم التطوير المحلي (Dev Server) | تحديد المنفذ الافتراضي (Port) أو ربط إعدادات وكيل (Proxy) للاتصال بالخلفية (Backend) |
نصل الآن إلى الدرس الخامس والذي يعتبر محورياً لفهم كيفية تحكم إطار عمل Angular 22.1 في مساحة العمل بالكامل. مركز هذا التحكم هو ملف angular.json، وهو العقل المدبر الذي يدير إعدادات البناء، مسارات الملفات الثابتة، التنسيقات العامة، وإعدادات الاختبار والتشغيل لجميع التطبيقات والمكتبات داخل مشروعك.
يُغنيك هذا الملف عن التعامل المباشر مع أدوات معقدة مثل Webpack. من خلال تعديل بسيط في هيكل هذا الملف (JSON)، يمكنك توجيه Angular CLI لمعرفة من أين يبدأ التطبيق (main.ts)، وما هي الملفات الثابتة التي يجب نسخها عند البناء.
في تطبيق Angular، غالبًا ما تحتاج إلى دمج مكتبات تنسيق خارجية (مثل Bootstrap أو TailwindCSS) أو سكربتات عالمية. المكان الصحيح لتسجيل هذه الملفات هو داخل مصفوفات styles و scripts في هذا الملف، ليتم تجميعها تلقائياً عند التشغيل.
عند تثبيت مكتبة خارجية، نقوم بفتح ملف angular.json وتوجيه المسارات داخل قسم build:
| 1 | "architect": { |
| 2 | "build": { |
| 3 | "options": { |
| 4 | "styles": [ |
| 5 | "node_modules/bootstrap/dist/css/bootstrap.rtl.min.css", |
| 6 | "src/styles.scss" |
| 7 | ], |
| 8 | "scripts": [ |
| 9 | "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js" |
| 10 | ], |
| 11 | "assets": [ |
| 12 | "src/favicon.ico", |
| 13 | "src/assets" |
| 14 | ] |
| 15 | } |
| 16 | } |
| 17 | } |
إذا أردت أن يعمل ng serve دائماً على منفذ معين (مثلاً 4500) دون الحاجة لكتابته كل مرة في سطر الأوامر، يتم التعديل في قسم serve:
| 1 | "architect": { |
| 2 | "serve": { |
| 3 | "options": { |
| 4 | "port": 4500, |
| 5 | "open": true |
| 6 | } |
| 7 | } |
| 8 | } |