Question

考虑; JHipster生成基础项目。 Angular 4是客户端框架。 Webpack捆绑了客户端资产。

这个想法是构建一个可插拔的管理仪表板（可扩展）。将具有主要结构和页面的基础系统。其他团队可以构建自己的插件（页面）并在运行时将其附加到现有系统。因此，我们需要从远程存储库URL加载插件模块，这些URL将从服务器端发送（或者如果有任何更好的想法请通知我）。

我构建了一个模拟主流的原型。但是，我遇到了很多障碍。主要是在运行时加载插件模块，使用Webpack编译我们的项目。

Webpack将使用模块ID（resource）替换所有模块名称。

换句话说：

首先要了解的是，Webpack无法动态加载构建期间未知的模块。这继承了Webpack构建依赖关系树的方式，并在构建期间收集模块标识符。它完全没问题，因为Webpack是一个模块捆绑器，而不是模块加载器。所以你需要使用模块加载器，现在唯一可行的选择是SystemJS（resource）。

我在互联网上找到的与此主题相关的所有文章都说它可行，但它会很复杂。从远程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来实现这样的系统？有没有关于这个主题的任何好的文档或一个工作的例子？我应该考虑这种系统的另一个客户端框架吗？

更新

我找到了closed issue on Angular-cli存储库的以下答案：

我没有看到有一种方法可以将懒惰路由检测和AOT与动态运行时延迟路由一起使用。您需要一个不同于CLI为其提供的构建系统。

SystemJS会允许类似的东西，但可能不会使用AOT。

那么，我们应该如何使用SystemJS实现这一目标？仍然缺乏关于这个主题的文档，特别是考虑到Angular 4（Typescript）作为我们的框架。

如何使用Angular 4构建可插拔仪表板？

0 个答案: