कोणीय 2 आलसी लोडिंग तकनीक

Question

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

अब मैं कोणीय 2 में बदलना चाहता हूं और मैं एचटीएमएल, सीएसएस और जेएस (कोणीय) सामग्री के लिए सबसे अच्छी आलसी लोडिंग तकनीक की तलाश में हूं जो मार्गों पर निर्भर नहीं है और जो हजारों विभिन्न जावास्क्रिप्ट पर निर्भर नहीं है चौखटे।

तो आलसी लोड हो रहा है मार्ग घटकों काफी सरल लगता है: http://blog.mgechev.com/2015/09/30/lazy-loading-components-routes-services-router-angular-2

लेकिन आप मार्गों के बिना उस परिदृश्य कैसे पूरा होगा? क्या आप वेबपैक की तरह कुछ सुझाएंगे, या मुझे जेज की आवश्यकता है? क्या कोणीय 2 के लिए OClazyload की तरह कुछ है? या यह किसी भी ढांचे के बिना भी कोणीय 2 के साथ किसी भी तरह काम करता है?

मैं "इसे आसान रखना" का मित्र हूं और मैं वास्तव में इसे जितना संभव हो उतना छोटा और सरल रखना चाहता हूं।

धन्यवाद!

Answer 1

कोणीय 2 वेब घटकों पर आधारित है। सबसे आसान तरीका (जैसा आपने कहा था "इसे सरल रखें" मार्ग और घटकों का उपयोग कर रहा है। आप अपने एचटीएमएल में निर्देशों का उपयोग करके घटकों को भी लोड कर सकते हैं। उदाहरण के लिए:

@Component({ 
    selector: 'my-component', // directive name 
    templateUrl: './app/my.component.html', 
    directives: [] 
}) 
export class MyComponent {} 



@Component({ 
    selector: 'root-component', // directive name 
    directives: [MyComponent], 
    template: '<my-component></my-component>', 
}) 
export class myComponent {} 

अगर आप <my-component> शामिल करने के लिए अपने टेम्पलेट को संशोधित गतिशील यह गतिशील घटक लोड होगा। यह एक सर्वोत्तम अभ्यास नहीं है।

कोणीय 2 के लिए dynamic component loader है, लेकिन यह मार्ग या निर्देशों का उपयोग करने जितना आसान नहीं है। यह किसी घटक का एक उदाहरण बनाएगा और इसे किसी अन्य घटक उदाहरण के घटक दृश्य के अंदर स्थित व्यू कंटेनर में अटैच करेगा।

इसके साथ

आप का उपयोग कर सकते हैं:

@Component({ 
    selector: 'child-component', 
    template: 'Child' 
}) 
class ChildComponent { 
} 
@Component({ 
    selector: 'my-app', 
    template: 'Parent (<child id="child"></child>)' 
}) 
class MyApp { 
    constructor(dcl: DynamicComponentLoader, injector: Injector) { 
    dcl.loadAsRoot(ChildComponent, '#child', injector); 
    } 
} 
bootstrap(MyApp); 

जिसके परिणामस्वरूप डोम:

<my-app> 
    Parent (
    <child id="child">Child</child> 
) 
</my-app> 

वहाँ एक और विकल्प है, जिसमें आप वैकल्पिक रूप से इंजेक्टर कॉन्फ़िगर करने के लिए प्रदाताओं प्रदान कर सकते हैं (जैसा कि ऊपर angular2 लिंक को देखो) है इस घटक के लिए प्रावधान।

उम्मीद है कि इससे मदद मिलती है।

Answer 2

https://medium.com/@daviddentoom/angular-2-lazy-loading-with-webpack-d25fe71c29c1#.582uw0wac

चलें मान हम अपने आवेदन, "घर" और "" के बारे में दो पृष्ठों की है। कुछ लोग कभी भी पृष्ठ के बारे में कभी नहीं पहुंच सकते हैं, इसलिए यह केवल उन पृष्ठों को लोड करने के लिए समझ में आता है, जिन्हें वास्तव में इसकी आवश्यकता होती है। यह वह जगह है जहां हम आलसी लोडिंग का उपयोग करेंगे।

Answer 3

कोणीय 2 नवीनतम संस्करण के साथ हम आलसी लोडिंग करने के लिए loadchildren प्रॉपर्टी का उपयोग कर सकते हैं। उदाहरण के लिए: { पथ: 'ग्राहक', loadChildren: './customer.module#Customer2Module?chunkName=Customer' },

इस ऊपर के उदाहरण मैं webpack बंडलिंग उपयोग कर रहा हूँ में (कोणीय 2 रूटर लोडर) + Anguar 2 आलसी लोड मॉड्यूल के लिए रूटिंग।