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

我正面临Angular应用程序的问题。如何将动态外部组件加载到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。所以我们的目标是动态加载文件和实例包含的组件。

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

这应该有可能吗？我可以改变我的代码结构;更改外部小部件..（例如，widgetB还没有被转译，...）

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

来源

2017-08-04 jano42

我做的完全一样。

首先要理解的是，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

来源

2017-08-04 12:09:05

你的做法是非常有趣的，是可以使用这种方式来导入远程托管的组件/模块？ – Seb

@Seb，是的，但是你需要使用SystemJS代替那 –

，这对我来说可能有用！你有任何如何集成systemJs和webpack的例子吗？还有一个远程组件的System.import的例子？ – Seb

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

回答

相关问题