如何将有角度的应用程序嵌入另一个应用程序? [英] how to embed an angular app into another app?
问题描述
我的团队开发了一个已投入生产一段时间的Angle 5应用程序，但最近我们受命让该应用程序在公司拥有的其他3个站点上运行.一个站点是使用Angular6构建的SPA，另一个站点也是SPA，但使用Angular5，而另一个站点则使用一些较旧的库，例如jQuery.
My team develop an angular 5 application that has been in production for a while, but we've been tasked recently with making the app work in other 3 sites the company owns. One site is a SPA built with Angular6, other is also a SPA but uses Angular5, while the other is using some older libraries such as jQuery.
管理层希望我们立即与Angular5 SPA集成，因此我们只是将整个应用程序导出为带有子路由的模块，然后让其他应用程序进行引导.
Management wanted us to integrate with the Angular5 SPA right away so we just exported the whole application as a module with child routes and let the other application do the bootstrap.
但是，恐怕上述方法不适用于非角度站点.这也使这两个应用程序紧密耦合，因为主机"应用程序需要了解我们应用程序的所有依赖关系，而这并不是一个琐碎的应用程序(我想说是相当大的)，并安装它们，这在两个应用程序都需要不同版本的应用程序时引起了问题.相同的依赖关系，更不用说在升级依赖关系或框架本身时需要同步.我认为将应用程序嵌入更多网站时这种方法不会扩展.
But I'm afraid the above approach will not work for the non-angular site. This also tight couple both applications since the 'host' app needs to know about all dependencies of our application which is not a trivial app (I'd say is pretty big) and install them, this caused problems when both applications needed different versions of the same dependency, no to mention that we will need to sync when upgrading dependencies or the framework itself. I don't think this approach will scale when embedding the app into more sites.
我想实现更通用的实现的第一个想法是将我们的应用程序升级到Angular 6并使用自定义元素创建一个Web组件，但是我们需要支持不支持本机封装的IE11和Edge，因此我们需要进行测试我们在每个使用它的站点中使用我们的应用程序，以确保它们不会破坏我们的样式，我也不知道Web组件是否可以管理子路径.
My first idea for a more general implementation was to upgrade our app to Angular 6 and create a web component with a custom element, but we need to support IE11 and Edge which do not support native encapsulation, so we would need to test our app in every site where it is used, to make sure they are not breaking our styles, also I don't know whether a web component can manage child routes or not.
其他想法是使用iframe，但是我的问题是调整iframe的大小以适应内容，以及如何从iframe中的驻留"应用程序在主机"应用程序中添加子路由.
Other idea is to use an iframe but my problem here is the iframe resizing to adapt to the content and how to add child routes in the 'host' app from the 'resident' app inside the iframe.
是否有更好的方法来实现我们需要做的事情?
Is there a better way to achieve what we need to do?
理想的解决方案应该允许我们的应用程序在多个站点中使用(每个站点都提供特定的配置)，而无需我们使用我们的应用程序来了解该站点.
The ideal solution should allow our application to be used in multiple sites (each one providing specific configuration) without us having to know about the site using our app.
感谢您的帮助.
推荐答案
最近我一直在忙于这个话题，因为许多人一次又一次地遇到相同的问题(当然是我).如今，您经常听到微前端的概念.这个概念是关于将前端设计为可扩展和可扩展的.特别是在许多公司同时拥有 Angular 和 React 和 Vue 开发人员的时代. 以下方法是我的研究得出的:
I've been very busy with the topic lately, because many have the same problem again and again (me, of course). Nowadays, you often hear the concept of micro-frontends. The concept is about designing the frontend to be extensible and scalable. Especially in the time when many companies have both Angular and React and Vue developers. The following approaches came out of my research:
链接:
您可以创建新应用，并从旧版应用中获取超链接. (在两个应用之间切换时，必须重新加载页面.)
You can create your new app and have a hyperlink from your legacy app. (You must have a page reload when you switch beetween the both apps.)
iframes :
一位软件架构师构建了一个元路由器来处理iframe和单页应用程序:
看看这个:
a Software architect builded a meta router to deal with iframes and single page application:
Take a look at this:
- (github repository) A lightweight and solid approach towards micro frontends (SPAs/ clients for micro services)
元框架:
Metaframeworks允许您使用不同的框架构建的
differents应用之间进行交流:
这里有一些用于 microfrontend 目的的metaframeworks示例.
Metaframeworks allow you to have a communication beetween
differentsapps builded using differents frameworks:
here some example of metaframeworks for microfrontend purposes.
- Single Spa (官方网站) Single Spa:用于前端的JavaScript框架微服务
- FrintJs (官方网站) FrintJS:模块化JavaScript框架 用于构建可扩展的&反应性应用程序.
- Single Spa (official website) Single Spa: a javascript framework for front-end microservices
- FrintJs (official website) FrintJS: Modular JavaScript framework for building Scalable & Reactive applications.
- Mosaic9 https://www.mosaic9.org/
- Angular 8和ReactJS(使用NodeJS服务器和MySQL数据库): https://github.com/billyjov/angular-react-microfrontend
Web组件即Angular元素:
为了处理npm软件包，您可以使用另一个回答者提到的角度元素的概念.您必须创建一个Shell应用程序和另一个独立的应用程序，这些应用程序将被注册为您的Shell应用程序中的元素. 请看以下示例:构建微前端-角元素
In order to deal with npm packages you can use as the other answerer mentioned the concept of Angular elements. You have to create a shell app and another independently apps that will be registred as elements in your shell app. Take a look at this example.: Building micro frontends — angular elements
Mosaiq:布局服务
在线商店Zalando面临相同的问题，并创建了一个框架来处理该问题:
The online shop Zalando faced to the same problem and created a framework in order to deal with the problem:
尤其是零件 Tailor.js ，这是一个开源系统，用于按需组装在以 Go 编写的后端层上的组件.
Espacially the part Tailor.js, an open source system for the assembling the components on-demand on a backend layer written in Go.
PS.裁缝的灵感来自 BigPipe:通过Facebook对网页进行高性能处理 .
PS. Tailor was inspired by BigPipe: Pipelining web pages for high performance from Facebook.
插件体系结构
插件体系结构是一种将在某些时候调用外部代码而无需事先知道该代码的所有细节的体系结构.
A plugin architecture is an architecture that will call external code at certain points without knowing all the details of that code in advance.
此Stackoverflow问题在单页应用程序的情况下对此问题进行了详细说明:
This Stackoverflow question explain more about it in case of single page application:
Angular库
我认为正确的方法是在应用程序中拥有相同的框架和该框架的相同版本(例如Angular 7).我宁愿花一点时间来升级angular的打字稿版本.我希望答案对其他人有用.
I Think a right way is to have in a app the same framework and the same version of this framework (e.g Angular 7). I will prefer to take a time a do a upgrade to a typescript version of angular. I hope the answer can be usefull for others.
其他与Stackoverflow相关的问题和解答A :
微型前端示例
有关微型前端的资源列表
https://github.com/billyjov/microfrontend-resources
这篇关于如何将有角度的应用程序嵌入另一个应用程序?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
