如何将 Angular 应用程序嵌入到另一个应用程序中? [英] how to embed an angular app into another app?
问题描述
我的团队开发了一个 angular 5 应用程序，该应用程序已经投入生产一段时间了，但我们最近的任务是让该应用程序在公司拥有的其他 3 个站点上运行.一个站点是使用 Angular6 构建的 SPA，另一个站点也是使用 Angular5 的 SPA，而另一个站点则使用一些较旧的库，例如 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.
感谢您的帮助.
推荐答案
UPDATE 2020
您还可以使用新的 Webpack 5 模块联合.
以下示例展示了如何将模块联合与 Angular 和其他技术结合使用.
following examples show how to use module federation with Angular and other technologies.
原答案
我最近一直忙于这个话题，因为很多人一次又一次地遇到同样的问题(当然是我).如今，您经常听到微前端的概念.这个概念是关于将前端设计为可扩展和可扩展的.特别是在许多公司同时拥有 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.)
内嵌框架:
软件架构师构建了一个元路由器来处理 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 应用之间进行通信:
这里有一些用于微前端目的的元框架示例.
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 框架用于构建 Scalable &反应式应用.
- 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.
- Angular 8 和 ReactJS(使用 NodeJS 服务器和 MySQL 数据库):https://github.com/billyjov/angular-react-microfrontend
Web 组件，即 Angular 元素:
为了处理 npm 包，你可以使用其他回答者提到的 Angular 元素的概念.您必须创建一个 shell 应用程序和另一个独立的应用程序，这些应用程序将在您的 shell 应用程序中注册为元素.看看这个例子.:构建微前端 — angular 元素
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.
附注.Tailor 的灵感来自 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 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
这篇关于如何将 Angular 应用程序嵌入到另一个应用程序中?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
