كيفية ضم مكونات الكسلان في Angular CLI

لنبدأ بتوضيح كيفية ضبط عملية البناء في Angular CLI لتشمل مكونات المحملة بشكل كسلان داخل مجلد الإنتاج (dist).

أولاً، يجب عليك التأكد من أن تعريف مسار المكون الكسلان (LazyMeComponent) في system-config.ts يشير إلى المسار الصحيح للملف الناتج (lazy-me.component.js). يمكنك فعل ذلك بإضافة التالي إلى system-config.ts:

typescriptCopy code
/** Map relative paths to URLs. */
const map: any = {
  // ...
  'app/+lazy-me': 'app/lazy-me',
};

/** User packages configuration. */
const packages: any = {
  // ...
  'app/lazy-me': {
    main: 'lazy-me.component.js',
    defaultExtension: 'js'
  },
};

ثم، يجب عليك تأكيد أن lazy-me.component.js يتم تضمينه في ملف الإنتاج النهائي (dist) عند استخدام الأمر ng build -prod. من المفترض أن يتم ذلك تلقائياً عند استخدام Angular CLI. ومع ذلك، إذا كان الملف غير مضمن، يمكنك تجربة إجراءات التصحيح التالية:

1. تأكد من تحديث Angular CLI: تأكد من استخدام أحدث إصدار من Angular CLI لتجنب مشاكل البناء.

2. فحص ملف .angular-cli.json: تأكد من أن ملف الإعدادات الخاص بـ Angular CLI (angular-cli.json أو angular.json اعتمادًا على الإصدار) يتضمن المسارات الصحيحة للمكونات الكسلان وأنها مضافة إلى قائمة lazyModules إذا كنت تستخدم Angular CLI v6+.

3. تحديد مسارات خاصة بمكونات الكسلان: قد تحتاج إلى تحديد مسارات خاصة بمكونات الكسلان في ملف البناء الخاص بك، على سبيل المثال:

   jsonCopy code
   "lazyModules": [
      "app/lazy-me/lazy-me.module"
   ],
   

4. استخدام Webpack مباشرة: إذا كانت الإجراءات السابقة لا تعمل، يمكنك محاولة استخدام Webpack مباشرة مع Angular CLI بتعديل ملف webpack.config.js ليشمل مكونات الكسلان.

   javascriptCopy code
   module.exports = {
     resolve: {
       alias: {
         'app/+lazy-me': 'src/app/lazy-me'
       }
     }
   };
   

   ثم تشغيل الأمر ng build -prod للتأكد من أن المكونات الكسلانية تتم ضمها بشكل صحيح في الإنتاج.

بعد تطبيق هذه الإجراءات، يجب أن يتم ضمن ملف lazy-me.component.js في مجلد الإنتاج dist النهائي الخاص بالتطبيق.

بالطبع، هنا بعض المعلومات الإضافية التي قد تساعدك:

1. تحديث الإعدادات في Angular CLI v6+: إذا كنت تستخدم Angular CLI الإصدار 6 أو أحدث، يمكنك تحديد مكونات الكسلان باستخدام lazyModules في ملف angular.json:

   jsonCopy code
   "projects": {
     "your-project-name": {
       // ...
       "architect": {
         "build": {
           // ...
           "options": {
             // ...
             "lazyModules": [
               "src/app/lazy-me/lazy-me.module"
             ]
           }
         }
       }
     }
   }
   

2. تأكيد وجود الملف في الإنتاج: بعد تنفيذ ng build -prod، تأكد من أن ملف lazy-me.component.js تم إنشاؤه ومضمنه في مجلد dist/app/lazy-me/.

3. تحديث إعدادات الخدمة الويب: قد تحتاج إلى تحديث إعدادات الخدمة الويب لديك للسماح بتوجيه طلبات الملفات الثابتة إلى مسارات الكسلان. على سبيل المثال، في Apache، يمكنك استخدام .htaccess:

   rubyCopy code
   RewriteEngine On
   RewriteCond %{REQUEST_FILENAME} !-f
   RewriteRule ^(.*)$ index.html [QSA,L]
   

4. استخدام --output-hashing none: في بعض الحالات، قد ترغب في تعطيل التجزئة لملفات الإنتاج لتسهيل الوصول إلى ملفات الكسلان، يمكنك استخدام ng build -prod --output-hashing none لذلك.

5. تأكيد أمان الملفات: تأكد من أن ملفات الكسلان متاحة للوصول من خلال تحديد الصلاحيات الصحيحة على الملفات والمجلدات.

باستخدام هذه الإجراءات، يجب أن تتمكن من تضمين مكونات الكسلان بنجاح في مجلد الإنتاج (dist) الخاص بتطبيق Angular CLI الخاص بك.