首页 文章

使用Angular CLI构建动态组件加载器

提问于
浏览 次
3

基本上我想创建一个动态插件系统 . 我需要能够部署新插件而无需重新部署主插件系统 .

基本上如果我使用SystemJS，我可以做类似的事情

System.import(url).then(plugin => {
  this.createComponent(plugin.default);
});

url 是动态的东西 - 可以从db或config等读取它 .

上面可能会工作 - 除了我使用Angular CLI，它使用Webpack . 使用CLI是对整个项目的选择 - 所以我坚持使用Webpack和CLI .

由于Angular CLI做了很多抽象，我无法修改webpack配置（我可以，但是我必须手动维护它，这将再次破坏简单性） .

Webpack不是模块加载，而是捆绑器 - 意味着它应该事先知道这些模块，我不能只是在某处删除一个新模块并更新它的配置以动态加载它 .

我的选择在这里会是什么？

编辑：Webpack有自己的System.import，但它有一些检查，看看网址是静态的还是动态的 . 我可以忍受传递一个静态文件夹并且不得不将插件放入该文件夹 - 这似乎无法在任何地方工作，但在应用程序本身内部 .

angular angular-cli

1 回答

  • 1

    不幸的是，据我所知，在一天结束时，您需要将动态组件添加到当前模块的 entryComponents ，否则Angular将不允许您动态加载它并且它会抱怨 .

    所以无论哪种方式，你都必须静态加载组件并将其放在 entryComponents 中，所以使用SystemJS或其他东西没什么意义，你可以创建一个字典并在你想要的时候使用它：

    从'某处'导入;

    const dictionary = {
    component1  = MyComponentClass
}

 this.createComponent(dictionary[urlOrName]);

    另一种可能的解决方案是为您要动态加载的每个组件创建一个模块，然后将该组件添加到该模块的 entryComponents ，这样，您就可以动态导入/下载该模块，但我我不确定你是否可以动态地将动态模块添加到根模块（路由器在lazyLoading时这样做！~~） .

    在动态组件引入 AOT 之前，Angular曾经简单得多，他们诚实地通过引入 AOT 来扼杀简单性 .

    回复于

相关问题