Angular2: किसी दिए गए फ़ोल्डर

Question

app 
|-plugins 
     |-plugin1 
      |-config.json 
      |-plugin1.module.ts 
      |-plugin1.component.ts 

     |-plugin2 
      |-config.json 
      |-plugin2.module.ts 
      |-plugin2.component.ts 

से लोड हो रहा है मॉड्यूल गतिशील आप ऊपर देख सकते हैं, मैं "एप्लिकेशन/प्लग इन" फ़ोल्डर, जो प्लगइन्स शामिल है। ,

{ 
    path: "feature1", 
    moduleFile: "feature1.module", 
    moduleClassName: "Feature1Module" 
} 

तो क्या मैं चाहता हूँ से पहले आवेदन यह "एप्लिकेशन/प्लग इन" फ़ोल्डर और लोड स्कैन करेगा bootstrap - हर प्लगइन एक "config.json" फाइल जो सहित कुछ विन्यास बता देगा में शामिल होंगे सभी प्लगइन विन्यास, और आलसी सभी मॉड्यूल मार्ग पंजीकृत करें। उपर्युक्त उदाहरण के लिए मार्ग

{ 
    path: "feature1", 
    loadChildren: "app/plugins/plugin1/plugin1.module#Plugin1Module" 
} 

इस तरह हो जाएगा, हम प्लगइन फ़ोल्डर में नए प्लगइन ड्रॉप कर सकते हैं और आवेदन ताज़ा करते हैं, और हमारे नए गिरा प्लगइन तैयार होकर चलने लगे।

कोई भी जानता है कि मैं इसे कैसे प्राप्त कर सकता हूं?

नोट: मैं angular2 नवीनतम (2.1.0)

Answer 1

मैं एक आप का वर्णन कर रहे हैं की तुलना में समान व्यवहार की तलाश में हूँ पर हूँ और मुझे लगता है कि मैंने पाया है कि यह कैसे करना है, धन्यवाद इस GitHub मुद्दे पर: plunker here

• पहले:: dynamic.module.ts, गतिशील लोड मॉड्यूल और उसके घटक Lazy loading components without Route

  यहाँ कोड मैं यह करने के लिखा है है NT

  import { Component, NgModule } from '@angular/core' 
  
  @Component({ 
      selector: 'my-test', 
      template: `<h1>html template of TestComponent from DynamicModule</h1>` 
  }) 
  
  export class TestComponent { } 
  
  @NgModule({ 
      declarations: [TestComponent], 
      exports: [TestComponent] 
  }) 
  
  export class DynamicModule { } 
  

• दूसरा: यहाँ घटक है जो गतिशील मॉड्यूल को लोड करता है जब आप इसे मॉड्यूल पथ देना है।

  import { 
  Component, 
  ViewContainerRef, 
  Compiler, 
  ComponentFactory, 
  ComponentFactoryResolver, 
  ModuleWithComponentFactories, 
  ComponentRef, 
  ReflectiveInjector, 
  SystemJsNgModuleLoader } from '@angular/core'; 
  
  class ModuleNode { 
      modulePath: string; 
      componentName: string; 
  } 
  
  @Component({ 
      moduleId: module.id, 
      selector: 'widgetContainer', 
      templateUrl: './widgetContainer.component.html' 
  }) 
  
  export class WidgetContainerComponent { 
      widgetConfig: string; 
      module: ModuleNode; 
      cmpRef: ComponentRef<any>; 
  
  constructor(private widgetService: WidgetLoader, 
      private viewref: ViewContainerRef, 
      private resolver: ComponentFactoryResolver, 
      private loader: SystemJsNgModuleLoader, 
      private compiler: Compiler){} 
  
  openWebApp(menu:any) { 
      this.loader.load(menu.modulePath) // load the module and its components 
       .then((modFac) => { 
        // the missing step, need to use Compiler to resolve the module's embedded components 
        this.compiler.compileModuleAndAllComponentsAsync<any>(modFac.moduleType) 
  
         .then((factory: ModuleWithComponentFactories<any>) => { 
          return factory.componentFactories.find(x => x.componentType.name === menu.componentName); 
         }) 
         .then(cmpFactory => { 
  
          // need to instantiate the Module so we can use it as the provider for the new component 
          let modRef = modFac.create(this.viewref.parentInjector); 
          this.cmpRef = this.viewref.createComponent(cmpFactory, 0, modRef.injector); 
          // done, now Module and main Component are known to NG2 
  
         }); 
       }); 
  } 
  
  ngOnDestroy() { 
      if (this.cmpRef) { 
       this.cmpRef.destroy(); 
      } 
  } 
  

  }

क्या आप इस बारे में क्या सोचते हैं? क्या इसने सहायता की? आपकी प्रतिक्रिया के लिए बहुत - बहुत शुक्रिया।