بناء تطبيقات متعددة باستخدام Angular CLI

بناء عدة تطبيقات باستخدام angular-cli يعد أمرًا مثيرًا للاهتمام، حيث يمكنك بسهولة إنشاء تطبيقات متعددة وإدارتها باستخدام هذه الأداة القوية. عندما تنوي بناء تطبيقات متعددة باستخدام angular-cli، يتوجب عليك فهم كيفية التعامل مع ملف angular-cli.json وتكوينه بشكل صحيح لتحقيق هذا الهدف.

أولاً، يجب عليك تأكيد أن ملف angular-cli.json موجود في مجلد المشروع الخاص بك، وإذا لم يكن موجودًا، فيمكنك إنشاؤه يدويًا. ثم، يجب فتح هذا الملف باستخدام أي محرر نصوص مفضل لديك.

بمجرد فتح الملف، ستجد أنه يحتوي على كثير من الإعدادات والتكوينات المختلفة، ولكن الأمر الذي يهمنا في هذا السياق هو خاصية apps التي تمثل قائمة لتطبيقات Angular المختلفة التي تريد بنائها باستخدام angular-cli.

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

jsonCopy code
{
  "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 مع رقم التطبيق. على سبيل المثال:

cssCopy code
ng build --app=app1

أو

cssCopy code
ng build --app=app2

هذا الأمر سيقوم ببناء التطبيق المحدد وفقًا للتكوين المحدد في angular-cli.json. إذا كنت تريد بناء جميع التطبيقات في آن واحد، يمكنك استخدام الأمر دون تحديد أي تطبيق:

Copy code
ng build

وبهذا، ستقوم angular-cli ببناء كل التطبيقات المعرفة في ملف التكوين. باستخدام هذه الإستراتيجية، يمكنك بناء تطبيقاتك بسهولة وفعالية باستخدام angular-cli، وتحقيق الفوائد الكاملة لهذه الأداة الرائعة في تطوير تطبيقات Angular.