تحميل كسول من وحدة الميزات من مجلد "node_modules"

إذا حاول شخص ما إنشاء مكتبات زاويّة ، فقد يواجه مشكلة في تحميل الوحدة النمطية للميزات من node_modules . دعونا الغوص أعمق ونذهب من خلال المياه المظلمة.

إنشاء أدوات المكتبة

إذا لم تكن معتادًا على السؤال "كيفية إنشاء المكتبة؟" - يوجد على الأقل أداتان لإنشاء مكتبة الزاوية:

1. CLI الزاوي (نانوغرام packagr تحت غطاء محرك السيارة) ؛
2. مباشرة نانوغرام packagr .

يمكنك الحصول على مزيد من التفاصيل من خلال النقر على الروابط أعلاه ، كل شيء آخر دعنا ننتقل أكثر.

وحدات كسول (وحدات ميزة)

لذا ، إذا كنت قد عملت بالفعل مع Angular ، فعليك أن تعرف عن الوحدات الزاويّة ولأي أغراض تحتاج إليها.

يجب أن تحتفظ الوحدة النمطية عادةً بمجموعة من المكونات ، وخدمات التوجيهات التي تمثل جزءًا معينًا من الوظائف مكتفية ذاتيا. غالبًا ما ينشئ المطور وحدة منفصلة لميزة لا يتم تحميلها إلى التطبيق حتى لا يذهب المستخدم إلى صفحة معينة.

والآن حان الوقت لميزة المتجر (وليس حول هذا الآن) ووحدة الميزات.

إذا قمت بتضمين الوحدات النمطية Lazy Loaded في بعض الوحدات الأصل ، فلن تكون كسولًا ، لأنك ستعلنها في التطبيق وفي وقت التحويل البرمجي ، ستضيف TypeScript في JavaScript Webpack رمز هذه الوحدات النمطية إلى المجموعة الرئيسية وسيتم تحميل التطبيق كل هذا الرمز عند بدء التشغيل.

طريقة صحيحة واحدة فقط لإعلان وحدة كسول في التوجيه.

const routes: Routes = [ { path: 'reports', loadChildren: './reports/reports.module#ReportsModule' } ]; 

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

تبدأ المشاكل

كل الأمور على ما يرام إذا كانت Feature Module جزءًا من التعليمات البرمجية المصدر لتطبيقك ، ولكن ماذا لو كانت مكتبة مجمّعة تم إعدادها باستخدام npm؟ - لا يعمل بالطريقة المعتادة.

المشكلة الرئيسية هي أنه عند محاولة تسجيل وحدة الميزات هذه عن طريق السلسلة المعتادة ، ستواجه الخطأ.

 const routes: Routes = [ { path: 'reports', // will not work loadChildren: 'my-lib#ReportsModule' } ]; 

تسبب بسبب هذا النوع من الإعلان غير متوافق مع الوحدات النمطية المترجمة.

أنت قادر على صنع غلاف ومن ثم إعلانها في مجموعات.

 import { ReportsModule } from "my-lib"; @NgModule({ imports: [ReportModule], exports: [ReportModule] }) export class ReportsWrapperModule { } const routes: Routes = [ { path: 'reports', loadChildren: './wrapper.module#ReportsWrapperModule' } ]; 

ولكن ، من يهتم بإنشاء 15 غلاف لـ 15 وحدة؟ - أنا لست كذلك!

الحلول الممكنة

لن أخفي أنني لم أضيع الوقت في تحليل سبب حدوث ذلك بسبب Webpack أو بعض الزوايا CLI. لقد وجدت حلين ممكنين.

الحل رقم 1. المكتبة المترجمة و Feature Module لا تحتوي على وحدات ميزة متداخلة

رابط للمثال العمل.

الخطوة الأولى تحدد نوع السمة LoadChildren

 type LoadChildren = string | LoadChildrenCallback; type LoadChildrenCallback = () => Type<any> | NgModuleFactory<any> | Promise<Type<any>> | Observable<Type<any>>; 

مثيرة للاهتمام! لذلك ، من الناحية النظرية ، من الممكن استخدام import () لإرجاع الوعد مع الوحدة النمطية المطلوبة.
الرمز التالي يجب أن يكون على ما يرام.

 const routes: Routes = [ { path: 'reports', loadChildren: () => import('my-lib').then((res) => res.ReportsModule) } ]; 

أوه ، ماذا يحدث؟ - نرى أخطاء في وحدة التحكم ... نعم ، مجرد تغيير tsconfig.json

 { .. "module": "esNext", .. } 

الآن يجب أن تعمل بشكل جيد.

الحل رقم 2. تحتوي الوحدة النمطية للميزات على وحدات ميزات متداخلة (تتم فقط مع مكتبة غير مترجمة)

رابط للمثال العمل.

1. ليس عليك ترجمة المكتبة قبل التعبئة إلى حزمة npm ؛

   
   

2. نظرًا لعدم تجميع مصدر المكتبة ، يتعين عليك تضمينه في عملية تجميع تطبيقك. مجرد تغيير tsconfig.app.json ؛

   
   

    "exclude": [ "test.ts", "**/*.spec.ts", "../node_modules/**/*.spec.ts", "../node_modules/**/test.ts" ], "include": [ "*.ts", "./environments", "./app", "../node_modules/my-lib" ] 

   
   

3. خبر جيد - لا حاجة لاستخدام import () ؛

   
   

    const routes: Routes = [{ path: "reports", loadChildren: "my-lib#ReportsModule" }]; 

   
   

   تادام

   
   

PS تم اختبار هذه الحلول باستخدام Angular 7 فقط.

شكرا للاهتمام ، والتمتع بها.