गतिशील रूप से एक कोणीय अनुप्रयोग

Question

के अंदर एक और वेबपैक बंडल शामिल करें मैं एक कोणीय 2 अनुप्रयोग पर काम कर रहा हूं जो वेबपैक के साथ एक साथ बंडल किया गया है। सब कुछ ठीक काम करता है। हालांकि ऐप बूटस्ट्रैप करने से पहले, इस बंडल एप्लिकेशन को स्वतंत्र और रनटाइम पर भेज दिया जाएगा, मुझे अपने ऐप में बंडल किए गए मॉड्यूल में से एक में अन्य NgModules निर्दिष्ट करने की आवश्यकता है। मूल रूप से इसके बारे में सोचें index.html में शामिल दो बंडल, और जब बूटस्ट्रैप किया जाता है, तो बंडल 1 बंडल 2 में जाता है। केवल एक ऐप को 2 bootstraps बंडल करें। तो मैं कुछ प्रयोगों कि मैं आपके साथ साझा करने के लिए (मैं एक नहीं बल्कि गंदे और पूरी तरह से गलत दृष्टिकोण हो सकता है इस पर कुछ प्रकाश डाला करना चाहते हैं किया है, इसलिए यदि ऐसा है तो। मैं अगर यह गंदा कोई आपत्ति नहीं है सही करें यद्यपि यह काम कर सकता है एकमात्र तरीका है।)। केवल आवश्यकता है कि पारगमन के दौरान कुछ भी नहीं किया जाना चाहिए। आवश्यकता यह है कि मैं अपने index.html पर एक या अधिक बंडल शामिल कर सकता हूं और उन्हें एक दूसरे के पूर्व ज्ञान के बिना वास्तविक ऐप में लगाया जा सकता है।

कारण मैं पहली जगह में इस कर रहा हूँ क्योंकि मैं एक मंच है, जहां अन्य डेवलपर्स एक्सटेंशन स्थापित करके कोड में हुक कर सकते हैं पर काम करते हैं। इसका मतलब है कि मैं प्रारंभिक बंडल प्रदान करता हूं, जिसे पारदर्शी समय पर अन्य बंडलों का कोई ज्ञान नहीं है। यह AngularJS में आसान था, लेकिन Angular2 और आगे बढ़ रहा है, यह अब इतना आसान नहीं है।

main.ts में:

मैं निम्नलिखित दृष्टिकोण के साथ एप्लिकेशन bootstrapping में देरी करने में कामयाब रहे

window["platformBrowserDynamicRef"] = platformBrowserDynamic(); 
window["appModule"] = AppModule; 

यह ठीक काम करता है और जब मैं स्वयं बूटस्ट्रैप फोन एप्लिकेशन ठीक शुरू होता है। मैंने एक और बंडल बनाया है जो स्वतंत्र रूप से एक और ऐप के रूप में ठीक काम करता है।

जब मैं ऊपर की तरह एक अंतर्निहित सरणी में घटकों को आयात करके उन्हें एक साथ बंडल करने की कोशिश, और मैं एप्लिकेशन bootstrap, मैं एक त्रुटि मैं के बारे में क्या करना है पता नहीं है मिलता है।

window["app"].modulesImport.push(CommonModule); 
window["app"].modulesImport.push(FormsModule); 
window["app"].modulesImport.push(BrowserModule); 
window["app"].modulesImport.push(NgGridModule); 
window["app"].modulesImport.push(ReactiveFormsModule); 
window["app"].modulesImport.push(BrowserAnimationsModule); 
window["app"].modulesImport.push(HttpModule); 

@NgModule({ 
    imports: window["app"].modulesImport, 
    declarations: [ 
     DYNAMIC_DIRECTIVES, 
     PropertyFilterPipe, 
     PropertyDataTypeFilterPipe, 
     LanguageFilterPipe,  
     PropertyNameBlackListPipe  
    ], 
    exports: [ 
     DYNAMIC_DIRECTIVES, 
     CommonModule, 
     FormsModule, 
     HttpModule 
    ] 
}) 
export class PartsModule { 

    static forRoot() 
    { 
     return { 
      ngModule: PartsModule, 
      providers: [ ], // not used here, but if singleton needed 
     }; 
    } 
} 

एक अंतर्निहित सरणी में मॉड्यूल के बाद ठीक है, लेकिन जैसे ही काम करता है के रूप में मैं अपने अन्य बंडल से एक मॉड्यूल जोड़ने मैं निम्नलिखित त्रुटि मिलती है:

Uncaught Error: Unexpected value 'ExtensionsModule' imported by the module 'PartsModule'. Please add a @NgModule annotation. 
    at syntaxError (http://localhost:3002/dist/app.bundle.js:43864:34) [<root>] 
    at http://localhost:3002/dist/app.bundle.js:56319:44 [<root>] 
    at Array.forEach (native) [<root>] 
    at CompileMetadataResolver.getNgModuleMetadata (http://localhost:3002/dist/app.bundle.js:56302:49) [<root>] 
    at CompileMetadataResolver.getNgModuleSummary (http://localhost:3002/dist/app.bundle.js:56244:52) [<root>] 
    at http://localhost:3002/dist/app.bundle.js:56317:72 [<root>] 
    at Array.forEach (native) [<root>] 
    at CompileMetadataResolver.getNgModuleMetadata (http://localhost:3002/dist/app.bundle.js:56302:49) [<root>] 
    at CompileMetadataResolver.getNgModuleSummary (http://localhost:3002/dist/app.bundle.js:56244:52) [<root>] 
    at http://localhost:3002/dist/app.bundle.js:56317:72 [<root>] 
    at Array.forEach (native) [<root>] 
    at CompileMetadataResolver.getNgModuleMetadata (http://localhost:3002/dist/app.bundle.js:56302:49) [<root>] 
    at JitCompiler._loadModules (http://localhost:3002/dist/app.bundle.js:67404:64) [<root>] 
    at JitCompiler._compileModuleAndComponents (http://localhost:3002/dist/app.bundle.js:67363:52) [<root>] 

मैं भी AOT करने की कोशिश की है संकलन एक्सटेंशन मॉड्यूल जो या तो काम नहीं करता है। मैं भी गतिशील JitCompiler का उपयोग कर अगर मैं उस तरह से चारों ओर एप्लिकेशन में उन्हें मिल सकता है देखने के लिए क्रम पर घटकों के संकलन की कोशिश की। यद्यपि वही त्रुटि।

ऐप के बूस्ट्रैपिंग या ट्रांसमिशन के दौरान घटकों को सजाया गया है? मेरी निहित सरणी में मॉड्यूल पर देखकर मैं देख सकता हूं कि वे सजाए गए हैं, लेकिन मेरा नहीं है। क्या वह वेबपैक सजावटी विधि के कॉलिंग कोड को सम्मिलित कर रहा है? मुझे लगता है डेकोरेटर जानकारी transpilation दौरान खो जाता है, तो हो सकता है मैं अस्थायी दुकान की जरूरत है यह किसी भी तरह तो मैं इसे कहीं और हड़पने कर सकते हैं। (में पहला तत्व डेकोरेटर सरणी शामिल नहीं है के रूप में है कि extensionsmodule ध्यान दें)

मैं इम NgModule एनोटेशन समारोह एक अच्छी जगह हो जाएगा कैसे here.Maybe से आगे बढ़ने के लिए पर संकेत के लिए देख लगता है शुरू करना। हालांकि कहीं भी नहीं मिला।

संपादित

मुद्दे में अधिक मैं रूटर का उपयोग कर आलसी लोड हो रहा है दृष्टिकोण की कोशिश की है खोद कर, जहां पहले मैं इस त्रुटि मिल रही है, एक जे एस फ़ाइल के साथ यह लोड करने का प्रयास करें (नेटवर्क पता चलता है कि यह) फ़ाइल के लिए अनुरोध कभी नहीं जारी करता है:

const appRoutes: Routes = [ 
     { 
     path: 'edit-entity/:type/:id/:culture', 
     component: EntityEditor, 
     resolve: { 
      entity: EntityResolver, 
      navigation: NavigationResolver 
     }, 
     data: { shouldDetach: true}, 
     loadChildren: "/dist/extensions.bundle.js#ExtensionsBundle", 

     }, 
     { 
     path: '', 
     component: Dashboard, 
     resolve: { 
      navigation: NavigationResolver 
     }, 
     data: { shouldDetach: true}   
     } 
    ]; 

हल निम्न त्रुटि में:

"नाम ExtensionsModule.js साथ मॉड्यूल नहीं मिल सका" दूसरी बात मैं करने की कोशिश की इस तरह की एक loadChildren फ़ंक्शन का उपयोग:

const appRoutes: Routes = [ 
     { 
     path: 'edit-entity/:type/:id/:culture', 
     component: EntityEditor, 
     resolve: { 
      entity: EntityResolver, 
      navigation: NavigationResolver 
     }, 
     data: { shouldDetach: true}, 
     loadChildren:() => { 
      //"/dist/extensions.bundle.js#ExtensionsModule",    
      // return System.import('./dynamic.module').then((comp: any) => { 
      //  return comp.otherExport; 
      // }); 

      return window["lux"].modulesLazyImport[0]; 
     } 
     }, 
     { 
     path: '', 
     component: Dashboard, 
     resolve: { 
      navigation: NavigationResolver 
     }, 
     data: { shouldDetach: true}   
     } 
    ]; 

का समाधान करता है में:

app.bundle.js:1548 ERROR Error: Uncaught (in promise): Error: No NgModule metadata found for 'ExtensionsModule'. 
Error: No NgModule metadata found for 'ExtensionsModule'. 
    at NgModuleResolver.resolve (app.bundle.js:55709) [angular] 
    at CompileMetadataResolver.getNgModuleMetadata (app.bundle.js:56288) [angular] 
    at JitCompiler._loadModules (app.bundle.js:67404) [angular] 
    at JitCompiler._compileModuleAndComponents (app.bundle.js:67363) [angular] 
    at JitCompiler.compileModuleAsync (app.bundle.js:67325) [angular] 
    at ModuleBoundCompiler.compileModuleAsync (app.bundle.js:67693) [angular] 
    at MergeMapSubscriber.project (app.bundle.js:30608) [angular] 
    at MergeMapSubscriber._tryNext (app.bundle.js:69744) [angular] 
    at MergeMapSubscriber._next (app.bundle.js:69734) [angular] 
    at MergeMapSubscriber.Subscriber.next (app.bundle.js:14584) [angular] 
    at ScalarObservable._subscribe (app.bundle.js:69206) [angular] 
    at ScalarObservable.Observable.subscribe (app.bundle.js:118) [angular] 
    at MergeMapOperator.call (app.bundle.js:69709) [angular] 
    at Observable.subscribe (app.bundle.js:115) [angular] 
    at NgModuleResolver.resolve (app.bundle.js:55709) [angular] 
    at CompileMetadataResolver.getNgModuleMetadata (app.bundle.js:56288) [angular] 
    at JitCompiler._loadModules (app.bundle.js:67404) [angular] 
    at JitCompiler._compileModuleAndComponents (app.bundle.js:67363) [angular] 
    at JitCompiler.compileModuleAsync (app.bundle.js:67325) [angular] 
    at ModuleBoundCompiler.compileModuleAsync (app.bundle.js:67693) [angular] 
    at MergeMapSubscriber.project (app.bundle.js:30608) [angular] 
    at MergeMapSubscriber._tryNext (app.bundle.js:69744) [angular] 
    at MergeMapSubscriber._next (app.bundle.js:69734) [angular] 
    at MergeMapSubscriber.Subscriber.next (app.bundle.js:14584) [angular] 
    at ScalarObservable._subscribe (app.bundle.js:69206) [angular] 
    at ScalarObservable.Observable.subscribe (app.bundle.js:118) [angular] 
    at MergeMapOperator.call (app.bundle.js:69709) [angular] 
    at Observable.subscribe (app.bundle.js:115) [angular] 
    at resolvePromise (app.bundle.js:77503) [angular] 
    at resolvePromise (app.bundle.js:77488) [angular] 
    at :3000/dist/app.bundle.js:77537:17 [angular] 
    at Object.onInvokeTask (app.bundle.js:4599) [angular] 
    at ZoneDelegate.invokeTask (app.bundle.js:77289) [angular] 
    at Zone.runTask (app.bundle.js:77179) [<root> => angular] 
    at drainMicroTaskQueue (app.bundle.js:77433) [<root>] 
    at HTMLDivElement.ZoneTask.invoke (app.bundle.js:77364) [<root>] 

संपादित मैंने सोचा कि शायद त्रुटि क्योंकि मेरे annontations कभी नहीं बुलाया गया था। यकीन नहीं है कि यह मामला है। मैं इस पर ES5 जाने और नीचे की तरह मेरी निहित सूची में एक घटक धक्का देना चाहता था। Parts.module.ts के घोषणापत्र भाग में घटक को धक्का देने का प्रयास करते समय भी वही त्रुटि उत्पन्न होती है।

var HelloWorldComponent = function() { 

}; 

HelloWorldComponent.annotations = [ 
    new ng.core.Component({ 
     selector: 'hello-world', 
     template: '<h1>Hello World!</h1>', 
    }) 
]; 

window["lux"].componentsLazyImport.push(HelloWorldComponent); 

तो क्या यह कोणीय 4.0.0 में एक बग है या प्लगइन तंत्र बनाने के लिए यह संभव नहीं है?

सादर मोर्टेन

Answer 1

इस मैं मिल सकता है को प्राप्त करने के लिए एक ही रास्ता, webpack ड्रॉप के रूप में है कि निर्माण समय में सभी जानकारी चाहते है, और SystemJS का उपयोग जो रनटाइम पर मॉड्यूल लोड कर सकते हैं यह पता नहीं है के लिए गया था लगभग