Angular 4

Question

我一直在寻找开发一种方法，用于将模块和/或组件加载到AOT编译的Angular 4应用程序中，并且被各种解决方案所阻碍，这些解决方案似乎从未让我想到的地方。

我的要求是这样的：

• 我的主要应用程序是AOT编译，并且不知道它在运行时加载了什么，所以我不能在编译时将我的动态模块特别标识为一个入口组件（这对于＆＃39; dynamic＆＃明确是必需的） 39; Angular.io上提供的组件加载示例
• 理想情况下，我希望能够通过GET请求从后端数据库中提取代码，但我可以仅仅生活在编译网站旁边的文件夹中。
• 我使用Webpack编译我的主应用程序，将其分解成块 - 所以很多基于SystemJS的解决方案看起来像死路一条 - 基于我目前的研究，我可能错了。
• 我不需要知道或直接访问我的主应用程序的任何组件 - 本质上，我将一个角度应用程序加载到另一个角度应用程序中，动态加载的模块可能只有一些严格控制与父应用程序的显式接口点。

我已经使用像SystemJsNgModuleLoader这样的工具进行了探索 - 这似乎要求我提供Angular编译器，如果AOT以某种方式允许我包含它，我很高兴，即使我是不在其他地方使用它。我还研究过使用ngc直接编译我的动态模块并加载生成的ngfactory和编译的组件/模块，但是我不清楚这是否完全可行或者如果是这样 - Angular提供哪些工具这样做。我也看到了对ANALYZE_FOR_ENTRY_COMPONENTS的引用 - 但是不能清楚地了解它的局限性，因为首先分析表明它不是我想要的。

我曾经假设我可能能够定义一个公共接口，然后简单地发出一个get请求将我的动态组件带入我的应用程序 - 但Angular似乎对我试图做的任何事情都没有过敏而且完全没有步骤。试图直接将非角度代码附加到DOM。

我尝试做的甚至可能吗？ Angular 2+是否只是鄙视其内部应用程序架构的这种即时修改？

Answer 1

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

魔法在这里的片段中。 import {AComponentNgFactory, BComponentNgFactory} from './components.ngfactory.ts'; @NgModule({ imports: [BrowserModule], declarations: [AComponent, BComponent] }) export class AppModule { ngDoBootstrap(app) { fetch('url/to/fetch/component/name') .then((name)=>{ this.bootstrapRootComponent(app, name)}); } bootstrapRootComponent(app, name) { const options = { 'a-comp': AComponentNgFactory, 'b-comp': BComponentNgFactory };

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