我一直在寻求开发一种将模块和/或组件加载到 AOT 编译的 Angular 4 应用程序中的方法,但受到各种解决方案的阻碍,这些解决方案似乎从来没有让我到达我想要的位置。
我的要求是这样的:
我已经探索过使用诸如 SystemJsNgModuleLoader 之类的工具——这似乎要求我有 Angular 编译器,如果 AOT 以某种方式允许我包含它,即使我没有在其他地方使用它,我也很乐意这样做。我还研究了使用 ngc 直接编译我的动态模块并加载生成的 ngfactory 和编译的组件/模块,但我不清楚这是否可能或是否可能 - Angular 提供了哪些工具可以这样做。我还看到了对 ANALYZE_FOR_ENTRY_COMPONENTS 的引用 - 但无法清楚地挖掘出它的局限性,因为第一次分析表明它也不是我想要的。
我以为我可以定义一个通用接口(interface),然后简单地发出一个 get 请求,将我的动态组件带入我的应用程序 - 但 Angular 似乎对我尝试做的任何事情都过敏,除了一起跳出它并尝试附加非 Angular 代码直接到 DOM。
我想要做的甚至可能吗? Angular 2+ 是否简单地鄙视这种对其内部应用程序架构的动态修改?
最佳答案
我想我找到了一篇准确描述您正在尝试做的事情的文章。简而言之,您需要接管 Bootstrap 生命周期。
魔法就在这个片段中。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
关于javascript - Angular 4 在运行时动态加载模块和组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47146573/