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

原文 标签 javascript angular

我一直在寻求开发一种将模块和/或组件加载到 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+ 是否简单地鄙视这种对其内部应用程序架构的动态修改?

    最佳答案

    我想我找到了一篇准确描述您正在尝试做的事情的文章。简而言之,您需要接管 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/

    相关文章:

    javascript - 为什么Javascript中的void需要一个参数?

    javascript - 我如何获得一个按钮来更改样式表,将其保存到本地存储并出现在网站的所有页面上?

    javascript - JS文件中的MVC傻瓜验证验证错误

    javascript - javascript正则表达式camelcase

    javascript - 如何在 Angular 5 中发布 XML 正文?

    javascript - 如何在indexedDB中“从indexA> ='a'按indexB ASC限制10的表中选择*”?

    javascript - 如何阻止 jQuery TourBus 在点击时创建两个实例?

    html - 必需的HTML5输入不起作用-Angular 4

    json - Angular 将数据从json读取到textarea中

    angular - NPM 脚本 'start' 退出时未指示 Angular CLI 正在监听请求