javascript - Angular 4 在运行时动态加载模块和组件

Question

我一直在寻求开发一种将模块和/或组件加载到 AOT 编译的 Angular 4 应用程序中的方法，但被各种解决方案所阻碍，这些解决方案似乎永远无法让我到达我想要的位置。

我的要求是这样的:

• 我的主应用程序是 AOT 编译的，直到运行时才知道它正在加载什么，所以我无法在编译时明确地将我的动态模块识别为入口组件(这对于“动态”组件加载示例来说是明确必要的)在 Angular.io 上展示)
• 理想情况下，我希望能够通过 GET 请求从后端数据库中提取代码，但我可以简单地生活在已编译站点旁边的文件夹中。
• 我正在使用 Webpack 编译我的主要应用程序，将其分解成 block - 因此许多基于 SystemJS 的解决方案看起来都是死胡同 - 根据我目前的研究，我可能是错的。
• 我不需要知道或直接访问我的主应用程序的任何组件 - 本质上，我会将一个 Angular 应用程序加载到另一个应用程序中，动态加载的模块可能只有几个严格控制的显式接口(interface)指向父应用程序。

我探索过使用像 SystemJsNgModuleLoader 这样的工具——这似乎要求我有 Angular 编译器，如果 AOT 以某种方式允许我包含它，即使我没有在其他地方使用它，我也很乐意这样做。我还研究过使用 ngc 直接编译我的动态模块并加载生成的 ngfactory 和编译的组件/模块，但我不清楚这是否完全可能，或者如果是的话——Angular 提供了哪些工具可以这样做。我还看到了对 ANALYZE_FOR_ENTRY_COMPONENTS 的引用 - 但无法清楚地了解它的局限性，因为第一次分析表明它也不完全是我正在寻找的东西。

我曾假设我可以定义一个通用接口(interface)，然后简单地发出一个 get 请求，将我的动态组件引入我的应用程序中——但是 Angular 似乎对我尝试做的任何事情都非常敏感，除非完全脱离它，并且尝试将非 Angular 代码直接附加到 DOM。

我正在尝试做的事情是否可行？ Angular 2+ 是否只是轻视这种对其内部应用程序架构的即时修改？

Answer 1

我想我找到了一篇准确描述您正在尝试做的事情的文章。简而言之，您需要接管引导生命周期。

魔术就在这个片段中。从 './components.ngfactory.ts' 导入 {AComponentNgFactory, BComponentNgFactory};
@NgModule({
导入:[浏览器模块]，
声明:[AComponent, BComponent]
})
导出类 AppModule {
ngDoBootstrap(应用程序){
fetch('url/to/fetch/component/name')
.then((name)=>{ this.bootstrapRootComponent(app, name)});
}
bootstrapRootComponent(应用程序，名称){
常量选项 = {
'a-comp':AComponentNgFactory，
'b-comp':BComponentNgFactory
};


https://blog.angularindepth.com/how-to-manually-bootstrap-an-angular-application-9a36ccf86429