考虑; JHipster生成基础项目.Angular 4是客户端框架.Webpack捆绑了客户端资产.
我们的想法是构建一个可插拔的管理仪表板(可扩展).将具有主要结构和页面的基础系统.其他团队可以构建自己的插件(页面)并在运行时将其附加到现有系统.因此,我们需要从远程存储库URL加载插件模块,这些URL将从服务器端发送(或者如果有任何更好的想法请通知我).
我构建了一个原型来模拟主流.但是,我遇到了很多障碍.主要是在运行时加载插件模块,使用Webpack编译我们的项目.
Webpack将使用模块ID(资源)替换所有模块名称.
换一种说法:
首先要了解的是Webpack无法动态加载构建期间未知的模块.这继承了Webpack构建依赖关系树的方式,并在构建期间收集模块标识符.它完全没问题,因为Webpack是一个模块捆绑器,而不是模块加载器.因此,您需要使用模块加载器,现在唯一可行的选项是SystemJS(资源).
我在互联网上发现的与这个主题相关的所有文章都说它可行,但它会很复杂.从远程URL加载模块我没有太多运气.我一直在找东西说" 是的,这可能做x ",然后我遇到了一些错误,并寻找那个找别人说" 是的,这是不可能的 ".我曾尝试使用SystemJs加载器来延迟加载插件模块作为以下片段,但没有运气!
@Component({
providers: [
{
provide: NgModuleFactoryLoader,
useClass: SystemJsNgModuleLoader
}
]
})
export class ModuleLoaderComponent {
constructor(private _injector: Injector,
private loader: NgModuleFactoryLoader) {
}
ngAfterViewInit() {
this.loader.load('app/t.module#TModule').then((factory) => {
const module = factory.create(this._injector);
const r = module.componentFactoryResolver;
const cmpFactory = r.resolveComponentFactory(AComponent);
// create a component and attach it to the view
const componentRef = cmpFactory.create(this._injector);
this.container.insert(componentRef.hostView);
})
}
}所以我想知道是否真的可以使用Angular 4和Webpack来做这样的系统？有没有关于这个主题的任何好的文档或一个工作的例子？我应该考虑这种系统的另一个客户端框架吗？
UPDATE