如何将角度应用程序嵌入到另一个应用程序中？

我的团队开发了一个 Angular 5 应用程序，该应用程序已经投入生产一段时间了，但我们最近的任务是让该应用程序在公司拥有的其他 3 个站点上运行。一个站点是使用 Angular6 构建的 SPA，另一个站点也是 SPA 但使用 Angular5，而另一个站点则使用一些较旧的库，例如 jQuery。

管理层希望我们立即与 Angular5 SPA 集成，因此我们只需将整个应用程序导出为带有子路由的模块，并让其他应用程序进行引导。

但恐怕上述方法不适用于非角度站点。这也紧密耦合了两个应用程序，因为“主机”应用程序需要了解我们的应用程序的所有依赖项，这不是一个简单的应用程序（我想说相当大）并安装它们，当两个应用程序需要不同版本的应用程序时，这会导致问题相同的依赖项，更不用说我们在升级依赖项或框架本身时需要同步。我认为当将应用程序嵌入更多网站时，这种方法不会扩展。

我的第一个更通用的实现想法是将我们的应用程序升级到 Angular 6 并创建一个带有自定义元素的 Web 组件，但是我们需要支持 IE11 和 Edge，它们不支持本机封装，因此我们需要在每个使用它的网站，以确保它们不会破坏我们的样式，而且我不知道 Web 组件是否可以管理子路由。

其他想法是使用 iframe，但我的问题是 iframe 调整大小以适应内容以及如何从 iframe 内的“驻留”应用程序在“主机”应用程序中添加子路由。

有没有更好的方法来实现我们需要做的事情？

理想的解决方案应该允许我们的应用程序在多个站点中使用（每个站点都提供特定的配置），而我们不必了解使用我们的应用程序的站点。

感谢您的帮助。

2020 年更新

您还可以使用新的Webpack 5 模块联合.

以下示例展示了如何将模块联合与 Angular 和其他技术结合使用。

• 模块联合的实现示例，由模块联合的创建者提供 https://github.com/module-federation/module-federation-examples
• 使用 Angular 和动态模块联合构建基于插件的工作流设计器的示例 https://github.com/manfredsteyer/module-federation-with-angular-dynamic-workflow-designer
• 与 Angular 的动态模块联合 https://github.com/manfredsteyer/module-federation-with-angular-dynamic

原答案

我最近一直很忙这个话题，因为很多人一次又一次地遇到同样的问题（当然是我）。如今，您经常听到微前端的概念。这个概念是关于将前端设计为可扩展和可扩展的。尤其是在很多企业都拥有这两种能力的时代Angular and React and Vue开发商。 我的研究得出以下方法：

Links :

您可以创建新的应用程序并拥有超级链接来自您的旧应用程序。 （在两个应用程序之间切换时，必须重新加载页面。）

Iframes :

软件架构师构建了一个元路由器来处理 iframe 和单页应用程序：
看看这个：

• （github 存储库）面向微前端（SPA/微服务客户端）的轻量级可靠方法 https://github.com/manfredsteyer/meta-router

元框架:

元框架允许您在之间进行通信differents使用不同框架构建的应用程序：
这里有一些元框架的例子微前端目的。

• 单人水疗中心（官方网站）Single Spa：前端微服务的 JavaScript 框架 https://single-spa.js.org/
• FrintJs （官方网站）FrintJS：模块化 JavaScript 框架 用于构建可扩展和反应式应用程序。 https://frint.js.org/

Web 组件，即 Angular 元素:

为了处理 npm 包，您可以使用其他回答者提到的概念角元素 https://angular.io/guide/elements。您必须创建一个 shell 应用程序和另一个独立的应用程序，这些应用程序将在您的 shell 应用程序中注册为元素。 看看这个例子：构建微前端—— 角度元素 https://itnext.io/building-micro-frontend-applications-with-angular-elements-34483da08bcb

Mosaiq：布局服务

网上商店Zalando面对同样的问题并创建了一个框架来处理该问题：

• 马赛克9https://www.mosaic9.org/ https://www.mosaic9.org/

尤其是那部分Tailor.js，一个开源系统，用于在后端层按需组装组件Go.

附言。裁缝师的灵感来自于BigPipe：管道化网页以获得高性能 https://www.facebook.com/notes/facebook-engineering/bigpipe-pipelining-web-pages-for-high-performance/389414033919/来自脸书。

插件架构

插件架构是一种在某些点调用外部代码而无需提前知道该代码的所有细节的架构。

这个 Stackoverflow 问题 https://stackoverflow.com/questions/41438198/在单页应用程序的情况下详细解释一下：

角度库

我认为正确的方法是在应用程序中使用相同的框架和该框架的相同版本（例如 Angular 7）。我更愿意花时间升级到 Angular 的打字稿版本。我希望答案对其他人有用。

其他 Stackoverflow 相关问答:

Vue.JS - 微前端方法 https://stackoverflow.com/a/49204404/6432698
微前端架构建议 https://stackoverflow.com/q/47922293/

微前端示例

• Angular 8 和 ReactJS（使用 NodeJS 服务器和 MySQL 数据库）：https://github.com/billyjov/angular-react-microfrontend https://github.com/billyjov/angular-react-microfrontend

有关微前端的资源列表

https://github.com/billyjov/microfrontend-resources https://github.com/billyjov/microfrontend-resources