Angular2: Yukarıda görebileceğiniz gibi yükleme modülleri dinamik bir klasördeki

Question

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

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

itibaren, ben "app/plugins" eklentileri içeriyor klasörü var. Uygulama, "app/plugins" klasör ve yük tarar bootstrap önce

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

Yani ne istiyor ise - Her eklenti dahil olmak üzere bazı yapılandırma söyleyecektir biri "config.json" dosyasını içerecektir Tüm eklenti konfigürasyonları ve tüm modül rotalarını rahatça kaydedin. Yukarıdaki örnek için rota

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

Bu şekilde olacak, biz eklenti klasörüne yeni eklenti bırakın ve uygulamayı yenilemek ve bizim yeni düştü eklenti ayakta ve çalışıyor olabilir.

Bunu nasıl başarabilirim bilen var mı?

NOT: ben Tarif ettiğiniz olandan aynı davranışı arıyorum angular2 son (2.1.0)

Answer 1

am ve ben bunu nasıl bulduğumuzu düşünüyoruz, teşekkürler Bu github konuya: plunker here

• Birincisi: dynamic.module.ts, dinamik yüklü modülü ve compone İşte Lazy loading components without Route

  bunu yapmak için yazdım koddur 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 { } 
  

• İkincisi: Burada bunu modül yolunu verirken dinamik modülü yükleyen bileşenidir.

  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(); 
      } 
  } 
  

  }

Bu konuda ne düşünüyorsunuz? Yardımcı olur mu? Geri bildiriminiz için çok teşekkürler.