我的团队开发了一个已经生产了一段时间的角度5应用程序,但我们最近的任务是让应用程序在公司拥有的其他3个站点中运行.一个站点是使用Angular6构建的SPA,另一个站点是SPA但使用Angular5,而另一个站点使用一些较旧的库,如jQuery.
管理层希望我们立即与Angular5 SPA集成,因此我们只是将整个应用程序导出为具有子路由的模块,并让其他应用程序执行引导程序.
但我担心上述方法不适用于非角度站点.由于"主机"应用程序需要知道我们的应用程序的所有依赖关系,这不是一个简单的应用程序(我会说相当大)并且安装它们,这导致两个应用程序需要不同版本的相同的依赖关系,更不用说我们需要在升级依赖项或框架本身时进行同步.在将应用程序嵌入更多站点时,我认为这种方法不会扩展.
我对更一般实现的第一个想法是将我们的应用程序升级到Angular 6并使用自定义元素创建Web组件,但我们需要支持不支持本机封装的IE11和Edge,因此我们需要测试我们的应用程序使用它的每个站点,以确保它们不会破坏我们的样式,我也不知道Web组件是否可以管理子路由.
其他想法是使用iframe,但我的问题是iframe调整大小以适应内容以及如何在'host'应用程序中从iframe中的'常驻'应用程序添加子路由.
有没有更好的方法来实现我们需要做的事情？
理想的解决方案应该允许我们的应用程序在多个站点中使用(每个站点提供特定的配置),而无需我们使用我们的应用程序了解该站点.
谢谢你的帮助.
architecture iframe single-page-application angular micro-frontend