大佬教程收集整理的这篇文章主要介绍了如何将动态外部组件加载到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尚未转换,…)
首先要了解的是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
以上是大佬教程为你收集整理的如何将动态外部组件加载到Angular应用程序中全部内容，希望文章能够帮你解决如何将动态外部组件加载到Angular应用程序中所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。