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

【问题标题】：Building a dynamic component loader with Angular CLI使用 Angular CLI 构建动态组件加载器
【发布时间】：2017-07-06 08:26:40
【问题描述】：

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

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

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

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

上面可以工作 - 除了我使用使用 Webpack 的 Angular CLI。使用 CLI 是对整个项目的简单选择 - 所以我坚持使用 Webpack 和 CLI。

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

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

我的选择是什么？

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

【问题讨论】：

一年前开始时有同样的要求。除了使用 systemjs 而不是使用 angular-cli 之外别无选择。从那以后我没有看到任何可以让 cli 更“动态”地工作的东西，但我想知道是否有。
Webpack 不是一个模块加载，而是一个打包器 - 完全正确，所以 Webpack 和 SystemJS 之间应该没有选择，两者都用。它们是用于不同任务的不同工具。我正在开发基于插件的系统，现在两者都使用
@Maximus 是的，但有点担心 SystemJS 会过分杀伤力——我还需要以某种方式破解它以覆盖 webpacks System.import。这让我有些恼火……
@Maximus 动态加载组件时entryComponents怎么处理？
@SystemJS 遵循dynamic modules loading 的提议，因此随着时间的推移，它应该可以在浏览器中使用。此外，Here is what you need to know about dynamic components in Angular 的文章可能会帮助您完成您的旅程

【解决方案1】：

不幸的是，据我所知，最终你需要将你的动态组件添加到当前模块的entryComponents，否则 Angular 不会让你动态加载它，它会报错。

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

从“某处”导入 {MyComponentClass}；

const dictionary = {
    component1  = MyComponentClass
}

 this.createComponent(dictionary[urlOrName]);

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

在引入AOT 之前，Angular 在动态组件方面要简单得多，但他们确实通过引入AOT 来扼杀简单性

【讨论】：

你领先了一步，但是是的......恐怕你是对的。即使我设法动态加载文件，我仍然必须创建它们，而不必在模块中的声明下声明它们。如果我创建 PluginModule 并在门户中声明 - 对该模块（新插件）的更改仍需要重新编译门户？
做了更多的挖掘工作。我可以让插件加载器使用 JIT 编译器的新实例编译加载的内容，但我仍然必须在 @angular/compiler 上使用未记录且“需要更改”的方法 compileModuleAndAllComponentsAsync。