首页 文章

如何将动态外部组件加载到Angular应用程序中

提问于
浏览 次
5

我遇到了Angular应用程序的问题 .

我想用（aot）的Typscript构建一个角度应用程序 .

目的是显示带有一些小部件的用户仪表板 . 小部件是角度组件 .

我的应用程序附带了一些嵌入式小部件 . 但小部件应该通过像市场这样的东西来扩展;或手动创建 .

市场应该将文件（js / ts / bunlde .. ??）下载到特定的文件夹中 .

然后我的应用程序应该能够加载新的小部件（= ng组件）并实例化它们 .

我的文件夹结构（制作）

|- index.html
  |- main.f5b448e73f5a1f3f796e.bundle.js
  |- main.f5b448e73f5a1f3f796e.bundle.js.map
  |- .... (all other files generated)
  |- externalWidgets
      |- widgetA
            |- widjetA.js
            |- widjetA.js.map
            |- assets
                 |- image.png
      |- widgetB
            |- widjetB.ts
            |- widjetB.html
            |- widjetB.css

然后在加载用户页面时，数据库说有一个widgetA . 因此，目标是动态加载文件和instanciate包含的组件 .

我尝试过很多解决方案，使用“require”和“System.import”，但是当动态生成加载路径时，两者都失败了 .

这应该是可能的吗？我可以改变我的代码结构;更改外部小部件..（例如，widgetB尚未转换，...）

事实上，我正在寻找一个带有Angular4 / webpack应用程序的“插件系统” .

angular typescript plugins webpack runtime

1 回答

  • 14

    我做的完全一样 . 我在NgConf的this talk解释了细节 .

    首先要了解的是Webpack无法动态加载构建期间未知的模块 . 这是Webpack构建依赖关系树并在构建期间收集模块标识符的方式所固有的 . 它完全没问题，因为Webpack是一个模块捆绑器，而不是模块加载器 . 所以你需要使用模块加载器，现在唯一可行的选择是SystemJS .

    然后，应将每个插件打包为一个模块，并将所有导出的组件添加到该模块的 entryComponents 中 .

    在运行时，您将加载该模块以访问内部声明的组件（如果它） . 你真的不需要一个模块，但这是Angular中的一个包装单元，所以你不能避免使用它 . 现在，一旦你得到一个模块，你必须选择，具体取决于模块是否是使用AOT构建的 .

    如果它是使用AOT构建的，您只需从模块中获取导出的工厂类并创建模块实例：

    System.import('path/to/module').then((module)=>{
    const moduleFactory = module.moduleFactoryClassName;
    const moduleRef = moduleFactory.create(this.parentInjector);
    const resolver = moduleRef.componentFactoryResolver;
    const compFactory = resolver.resolveComponentFactory(AComponent);
}

    如果它不是使用AOT构建的，则必须使用JIT编译器进行编译：

    System.import('path/to/module').then((module)=>{
    const moduleFactory = this.compiler.compileModuleSync(module.moduleClassName);
    const moduleRef = moduleFactory.create(this.parentInjector);
    const resolver = moduleRef.componentFactoryResolver;
    const compFactory = resolver.resolveComponentFactory(AComponent);
}

    然后，您可以使用本文中介绍的技术在任何位置添加动态组件：Here is what you need to know about dynamic components in Angular

    回复于

相关问题