5

考虑; 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 来做这样的系统？是否有任何关于此主题的良好文档或工作示例？我应该考虑为此类系统使用另一个客户端框架吗？

更新

我在 Angular-cli 存储库上找到了以下已关闭问题的答案：

我认为没有办法将惰性路由检测和 AOT 与动态运行时惰性路由结合起来。您将需要一个不同于 CLI 提供的构建系统。

SystemJS 会允许这样的事情，但可能不允许使用 AOT。

那么，我们应该如何使用 SystemJS 来实现呢？仍然面临缺乏关于这个主题的文档，特别是考虑到 Angular 4 (Typescript) 作为我们的框架。

4

0 回答 0