我在Angular 6中制作了一个Widget Designer . 我需要为用户提供将小部件从工具栏拖动到窗格的功能 . 目前我一直在做原型,但是我只是试图在运行时只使用其路径加载组件 . 为了让您知道当用户将小部件从工具栏拖动到窗格时,我发送以下对象:

new Widget('Widget 1', { url: '../Widget/widget_one.component' })

然后窗格尝试在运行时解析组件:

onDropItem($event: any) {
    const componentFactory = this.componentFactoryResolver.resolveComponentFactory(require($event.dragData.component.url));
    this.host.viewContainerRef.clear();
    this.host.viewContainerRef.createComponent(componentFactory);
  }

我猜这个特定的部分 require($event.dragData.component.url) 在webpack的最后一个包中被改为 (__webpack_require__("./src/app/pane sync recursive")($event.dragData.component.url)) ,这导致一个错误,说它无法找到指定的模块 .

所以我需要一种方法在我的应用程序中运行时使用webpack并懒惰地加载组件 . 有任何想法吗?或者我应该考虑一种不同的方法,因为这是一个原型,我愿意接受建议吗?