بناء عدة تطبيقات باستخدام angular-cli يعد أمرًا مثيرًا للاهتمام، حيث يمكنك بسهولة إنشاء تطبيقات متعددة وإدارتها باستخدام هذه الأداة القوية. عندما تنوي بناء تطبيقات متعددة باستخدام angular-cli، يتوجب عليك فهم كيفية التعامل مع ملف angular-cli.json
وتكوينه بشكل صحيح لتحقيق هذا الهدف.
أولاً، يجب عليك تأكيد أن ملف angular-cli.json
موجود في مجلد المشروع الخاص بك، وإذا لم يكن موجودًا، فيمكنك إنشاؤه يدويًا. ثم، يجب فتح هذا الملف باستخدام أي محرر نصوص مفضل لديك.
-
تحسين أداء معالجة البيانات في R17/02/2024
-
Firebase Storage for Video Streaming05/03/2024
بمجرد فتح الملف، ستجد أنه يحتوي على كثير من الإعدادات والتكوينات المختلفة، ولكن الأمر الذي يهمنا في هذا السياق هو خاصية apps
التي تمثل قائمة لتطبيقات Angular المختلفة التي تريد بنائها باستخدام angular-cli.
بشكل افتراضي، تحتوي هذه القائمة على عنصر واحد يمثل تطبيق Angular الأساسي. ولكن لإضافة تطبيق إضافي، ما عليك سوى إضافة عنصر إضافي داخل هذه القائمة. على سبيل المثال، إذا كنت تريد إضافة تطبيق ثانٍ، يمكنك إضافة شيفرة تعريفية جديدة له في هذا النمط:
json{
"apps": [
{
"name": "app1",
"root": "src",
"outDir": "dist/app1",
"assets": [
"assets",
"favicon.ico"
],
"index": "index.html",
"main": "main.ts",
"polyfills": "polyfills.ts",
"test": "test.ts",
"tsconfig": "tsconfig.app.json",
"testTsconfig": "tsconfig.spec.json",
"prefix": "app1",
"styles": [
"styles.css"
],
"scripts": [],
"environmentSource": "environments/environment.ts",
"environments": {
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts"
}
},
{
"name": "app2",
"root": "src",
"outDir": "dist/app2",
"assets": [
"assets",
"favicon.ico"
],
"index": "index.html",
"main": "main.ts",
"polyfills": "polyfills.ts",
"test": "test.ts",
"tsconfig": "tsconfig.app.json",
"testTsconfig": "tsconfig.spec.json",
"prefix": "app2",
"styles": [
"styles.css"
],
"scripts": [],
"environmentSource": "environments/environment.ts",
"environments": {
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts"
}
}
]
}
يُظهر هذا المثال إضافة تطبيق ثانٍ باسم “app2”. لاحظ أنه يتم تكوين كل تطبيق بشكل مستقل مع إعدادات مثل المسارات والملفات والبيئات. عندما تضيف تطبيقًا جديدًا، تأكد من تحديد اسم فريد ومسارات مختلفة لتجنب التضارب.
بمجرد إضافة تعريف للتطبيق الثاني أو أي تطبيق إضافي آخر، يمكنك الآن استخدام أمر ng build
لبناء كل هذه التطبيقات. يمكنك ببساطة تمرير اسم التطبيق كوسيلة للتحديد، أو يمكنك استخدام الخيار --app
مع رقم التطبيق. على سبيل المثال:
cssng build --app=app1
أو
cssng build --app=app2
هذا الأمر سيقوم ببناء التطبيق المحدد وفقًا للتكوين المحدد في angular-cli.json
. إذا كنت تريد بناء جميع التطبيقات في آن واحد، يمكنك استخدام الأمر دون تحديد أي تطبيق:
ng build
وبهذا، ستقوم angular-cli ببناء كل التطبيقات المعرفة في ملف التكوين. باستخدام هذه الإستراتيجية، يمكنك بناء تطبيقاتك بسهولة وفعالية باستخدام angular-cli، وتحقيق الفوائد الكاملة لهذه الأداة الرائعة في تطوير تطبيقات Angular.
المزيد من المعلومات
بالتأكيد، دعنا نستكمل المقال لتوضيح المزيد من النقاط والتفاصيل حول بناء عدة تطبيقات باستخدام Angular CLI.
عندما تقوم ببناء عدة تطبيقات باستخدام Angular CLI، يجب أن تأخذ في الاعتبار أنه كل تطبيق سيكون مستقلاً تمامًا، ولكن قد ترغب في مشاركة بعض الموارد مثل المكونات والخدمات بين هذه التطبيقات. لحل هذه المشكلة، يمكنك استخدام المكتبات المشتركة أو حزم المكونات (Angular Libraries)، والتي تسمح بمشاركة الشيفرة بين التطبيقات بشكل فعال.
يمكنك إنشاء مكتبة Angular بواسطة Angular CLI باستخدام الأمر:
perlng generate library my-lib
ثم يمكنك استخدام هذه المكتبة في أي تطبيق Angular آخر عن طريق إضافتها كتبعيد في ملف package.json
وتثبيتها باستخدام npm أو yarn. بعد ذلك، يمكنك استيراد المكتبة في أي مكان داخل التطبيق واستخدام مكوناتها وخدماتها كما لو كانت محلية للتطبيق.
بالإضافة إلى ذلك، يمكنك أيضًا استخدام مفهوم الميكروفونتس (Microfrontends) لتطبيقات Angular. هذا المفهوم يتيح لك تقسيم التطبيق إلى عدة أجزاء صغيرة ومستقلة تمامًا، تُطوَّر وتُنشأ بشكل مستقل، ثم يتم دمجها معًا في وقت التشغيل. يمكن أن يكون لهذا النهج فوائد عديدة، مثل تبسيط عملية التطوير والاختبار وإدارة الفريق.
عند العمل مع عدة تطبيقات في مشروع واحد باستخدام Angular CLI، من المهم أيضًا تنظيم بنية المشروع بشكل جيد. يمكنك فصل التطبيقات في مجلدات منفصلة واستخدام ملفات تكوين منفصلة لكل تطبيق، مما يسهل الحفاظ على النظام وفهمه.
في الختام، بناء عدة تطبيقات باستخدام Angular CLI يمكن أن يكون تحدًا مثيرًا ولكنه مجزٍ إذا تم التخطيط لذلك بشكل جيد واستخدام أفضل الممارسات. من خلال تقسيم التطبيقات بشكل صحيح ومشاركة الموارد بينها بطريقة فعالة، يمكنك بناء مجموعة من التطبيقات القوية والمستدامة باستخدام Angular CLI.