如何将动态外部组件加载到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”,但是当动态生成加载路径时,两者都失败了. 这应该是可能的吗？ 事实上,我正在寻找一个带有Angular4 / webpack应用程序的“插件系统”. 解决方法
我做的完全一样.我在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 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |