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

Question

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

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

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

url 是动态的东西——可以从数据库或配置等中读取它。

以上可能会起作用——除了我使用 Angular CLI，它使用 Webpack。使用 CLI 是简化整个项目的一个选择 - 所以我坚持使用 Webpack 和 CLI。

由于 Angular CLI 做了很多抽象，我不能修改 webpack 配置(我可以，但我必须手动维护它，这又会破坏简单性)。

Webpack 不是一个模块加载，而是一个打包器——这意味着它应该事先知道这些模块，我不能只是将一个新模块放在某个地方并更新配置以动态加载它。

我的选择是什么？

编辑:Webpack 有自己的 System.import，但它会检查 url 是静态的还是动态的。我可以忍受传递静态文件夹并不得不将插件放入该文件夹 - 这似乎在应用程序本身之外的任何地方都不起作用。

Answer 1

不幸的是，据我所知，在一天结束时你需要将你的动态组件添加到当前模块的 entryComponents 中，否则 Angular 不会让你动态加载它并且它会提示。

所以无论哪种方式，您都必须静态加载组件并将其放入 entryComponents 中，因此使用 SystemJS 或其他东西没有多大意义，您可以创建一个字典并使用它当你想要的时候:

从“某处”导入 {MyComponentClass}；

const dictionary = {
    component1  = MyComponentClass
}

 this.createComponent(dictionary[urlOrName]);

---

另一种可能的解决方案是为每个要动态加载的组件创建一个模块，然后将该组件添加到该模块的 entryComponents 中，这样，您就可以动态导入/下载该模块，但我不确定您是否可以将该动态模块动态添加到根模块(惰性加载时路由器的方式!~~)。

在引入 AOT 之前，Angular 在动态组件方面要简单得多，他们通过引入 AOT 老实说扼杀了这种简单性