👶🏾 🤜🏼 🗳️ "नोड_मॉडल" फ़ोल्डर से फ़ीचर मॉड्यूल का आलसी लोडिंग 🏚️ 🏈 😞

यदि आप में से किसी ने कोणीय पुस्तकालय बनाने की कोशिश की है, तो वह नोड_मॉड्यूल्स से आलसी लोडिंग फ़ीचर मॉड्यूल के साथ समस्या का सामना कर सकता है। चलो गहरा गोता लगाते हैं और अंधेरे पानी के माध्यम से चलते हैं।

पुस्तकालय उपकरण बनाना

यदि आप प्रश्न से परिचित नहीं हैं "पुस्तकालय कैसे बनाएं?" - कोणीय पुस्तकालय बनाने के लिए कम से कम दो उपकरण हैं:

आप ऊपर दिए गए लिंक पर क्लिक करके अधिक जानकारी प्राप्त करने में सक्षम हैं, अन्य सभी आगे बढ़ते हैं।

आलसी मॉड्यूल (फ़ीचर मॉड्यूल)

तो, यदि आपने पहले से ही कोणीय के साथ काम किया है तो आपको कोणीय मॉड्यूल के बारे में जानना होगा और आपको किन उद्देश्यों के लिए उनकी आवश्यकता है।

एक मॉड्यूल को आमतौर पर घटकों का एक समूह रखना पड़ता है, निर्देशों की सेवाएं जो कार्यक्षमता के एक निश्चित आत्मनिर्भर टुकड़े का प्रतिनिधित्व करती हैं। अक्सर डेवलपर एक ऐसी सुविधा के लिए एक अलग मॉड्यूल बनाता है जिसे ऐप पर लोड नहीं करना पड़ता है जब तक कि उपयोगकर्ता किसी विशेष पृष्ठ पर नहीं जाएगा।

और अब फीचर स्टोर (अभी के लिए इस बारे में नहीं) और फ़ीचर मॉड्यूल के लिए समय।

यदि आप कुछ मूल मॉड्यूल में आलसी लोड किए गए मॉड्यूल शामिल करते हैं तो वे आलसी नहीं होंगे, क्योंकि आप उन्हें ऐप में घोषित करेंगे और संकलन के समय में जावास्क्रिप्ट वेबपैक में टाइपस्क्रिप्ट उन मॉड्यूल के कोड को मुख्य गुच्छा में जोड़ देंगे और आवेदन लोड हो जाएगा स्टार्टअप पर सभी कोड।

रूटिंग में एक आलसी मॉड्यूल घोषित करने का केवल एक सही तरीका है।

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

तो आप विशेष स्ट्रिंग प्रदान करते हैं जो वास्तव में "#" है और ऐप को पता चल जाएगा कि इस मॉड्यूल को मुख्य ऐप से अलग लोड किया जाना है।

मुसीबतें शुरू हो जाती हैं

फ़ीचर मॉड्यूल आपके ऐप के सोर्स कोड का एक हिस्सा है, लेकिन सब ठीक हो जाता है, लेकिन अगर यह एक कंपाइल लाइब्रेरी 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 रैपर बनाने में रुचि रखते हैं? - मैं नहीं!

संभव समाधान

मैं छिपाऊंगा नहीं मैंने विश्लेषण करने में समय बर्बाद नहीं किया कि यह वेबपैक या कुछ कोणीय CLI के कारण क्यों होता है। मुझे दो संभावित समाधान मिले।

समाधान # 1। लाइब्रेरी संकलित और फ़ीचर मॉड्यूल में कोई नेस्टेड फ़ीचर मॉड्यूल नहीं हैं

काम करने के उदाहरण के लिए लिंक।

पहला चरण निर्धारित करें कि किस प्रकार का लोडचिल्ड्रेन विशेषता है

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

दिलचस्प! इसलिए, सैद्धांतिक रूप से, आवश्यक मॉड्यूल के साथ वादा वापस करने के लिए आयात () का उपयोग करना संभव है।
अगला कोड ठीक होना चाहिए।

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

ओह, क्या होता है? - हम कंसोल में एरर्स देखते हैं ... हां, बस tsconfig.json बदल दें

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

अब ठीक काम करना है।

समाधान # 2। फ़ीचर मॉड्यूल में नेस्टेड फ़ीचर मॉड्यूल हैं (केवल गैर-संकलित लाइब्रेरी के लिए किया गया है)

काम करने के उदाहरण के लिए लिंक।

आपको npm पैकेज की पैकेजिंग से पहले पुस्तकालय को संकलित नहीं करना है;
जैसा कि लाइब्रेरी का स्रोत संकलित नहीं है, आपको इसे अपने ऐप की संकलन प्रक्रिया में शामिल करना होगा। बस tsconfig.app.json बदलें;
```
 "exclude": [ "test.ts", "**/*.spec.ts", "../node_modules/**/*.spec.ts", "../node_modules/**/test.ts" ], "include": [ "*.ts", "./environments", "./app", "../node_modules/my-lib" ] 
```
अच्छी खबर - आयात का उपयोग करने की आवश्यकता नहीं है () ;
```
 const routes: Routes = [{ path: "reports", loadChildren: "my-lib#ReportsModule" }]; 
```
Tadam!

पुनश्च ये समाधान केवल 7 कोणीय के साथ परीक्षण किया गया।

ध्यान के लिए धन्यवाद, आनंद लें।