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

首先: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(); }}}您对此有何看法?有帮助吗?非常感谢您的反馈.app |-plugins |-plugin1 |-config.json |-plugin1.module.ts |-plugin1.component.ts |-plugin2 |-config.json |-plugin2.module.ts |-plugin2.component.tsAs 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 -{ 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 { 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) 解决方案 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 RouteHere is the code I've written to do it : plunker hereFirst : dynamic.module.ts, the dynamically loaded module and its componentimport { 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(); }}}What do you think about that? Does it help? Thanks a lot for your feedback. 这篇关于Angular2:从给定文件夹动态加载模块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 上岸，阿里云！