typescript Angular2：从给定文件夹动态加载模块

Angular2: Loading modules dynamically from a given folder

提问by Jahid Shohel

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

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

As you can see above, I have "app/plugins"folder, which contains plugins. Each plugin will contain one "config.json" file which will tell some configuration including -

正如您在上面看到的，我有“app/plugins”文件夹，其中包含插件。每个插件将包含一个“config.json”文件，它会告诉一些配置，包括 -

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

So what I want is, before application bootstrap it will scan the "app/plugins"folder and load all plugin configurations, and lazily register all module routes. For above example the route will be

所以我想要的是，在应用程序引导之前，它会扫描“app/plugins”文件夹并加载所有插件配置，并懒惰地注册所有模块路由。对于上面的例子，路线将是

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

That way, we can drop new plugin into plugin folder and refresh the application, and our newly dropped plugin is up and running.

这样，我们可以将新插件放入插件文件夹并刷新应用程序，并且我们新放置的插件已启动并运行。

Anyone knows how can I achieve this?

任何人都知道我怎样才能做到这一点？

NOTE: I am on angular2 latest(2.1.0)

注意：我使用的是 angular2 最新版（2.1.0）

回答by Mawycezil

I'm looking for the same behavior than the one you're describing and I think I've found how to do it, thanks to this github issue : Lazy loading components without Route

我正在寻找与您所描述的行为相同的行为，我想我已经找到了如何做到这一点，这要归功于这个 github 问题： Lazy loading components without Route

Here is the code I've written to do it : plunker here

这是我编写的代码： plunker here

• First : dynamic.module.ts, the dynamically loaded module and its component

  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 { }
  

• Second : here is the component which dynamically loads module when you give it the module path.

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

  }

• 第一个：dynamic.module.ts，动态加载的模块及其组件

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

  }

What do you think about that? Does it help? Thanks a lot for your feedback.

你怎么看？它有帮助吗？非常感谢您的反馈。