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

Question

我的团队开发了一个已经生产了一段时间的角度5应用程序,但我们最近的任务是让应用程序在公司拥有的其他3个站点中运行.一个站点是使用Angular6构建的SPA,另一个站点是SPA但使用Angular5,而另一个站点使用一些较旧的库,如jQuery.

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

但我担心上述方法不适用于非角度站点.由于"主机"应用程序需要知道我们的应用程序的所有依赖关系,这不是一个简单的应用程序(我会说相当大)并且安装它们,这导致两个应用程序需要不同版本的相同的依赖关系,更不用说我们需要在升级依赖项或框架本身时进行同步.在将应用程序嵌入更多站点时,我认为这种方法不会扩展.

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

其他想法是使用iframe,但我的问题是iframe调整大小以适应内容以及如何在'host'应用程序中从iframe中的'常驻'应用程序添加子路由.

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

理想的解决方案应该允许我们的应用程序在多个站点中使用(每个站点提供特定的配置),而无需我们使用我们的应用程序了解该站点.

谢谢你的帮助.

Answer 1

最近我一直在忙于这个话题，因为许多人一次又一次地遇到相同的问题（当然是我）。如今，您经常听到微前端的概念。这个概念是关于将前端设计为可扩展和可扩展的。尤其是在许多公司同时拥有Angular和React和Vue开发人员的时代。我的研究提出了以下方法：

友情链接 ：

您可以创建新应用，并从旧版应用中获得超链接。（在两个应用之间切换时，必须重新加载页面。）

iframe：

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

• （github存储库）一种面向微型前端的轻量级且可靠的方法（用于微型服务的SPAs /客户端）

元框架：

Metaframeworks允许您differents使用不同的框架构建的应用之间进行交流：
这里是一些用于微前端的metaframeworks示例。

• Single Spa （官方网站） Single Spa：用于前端微服务的JavaScript框架
• FrintJs （官方网站） FrintJS：用于构建可伸缩和响应式应用程序的模块化JavaScript框架。

Web组件，即Angular元素：

为了处理npm包，您可以使用Angular元素的概念作为其他答复者。您必须创建一个Shell应用程序和另一个独立的应用程序，这些应用程序将被注册为您的Shell应用程序中的元素。看一下这个例子。：构建微前端-角元素

Mosaiq：布局服务

网上商店Zalando面临相同的问题，并创建了一个框架来解决该问题：

• Mosaic9 https://www.mosaic9.org/

特别是部分Tailor.js，这是一个开源系统，用于按需在Go编写的后端层上组装组件。

PS。Tailor的灵感来自BigPipe：通过Facebook 对管道进行高性能化处理。

插件架构

插件体系结构是一种将在某些时候调用外部代码而无需事先知道该代码的所有细节的体系结构。

在单页应用程序的情况下，有关Stackoverflow的问题对此有更多说明：

角库

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

其他与Stackoverflow相关的问答：

Vue.JS-微型前端方法
微型前端架构建议

微型前端示例

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

有关微前端的资源列表

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

Answer 2

我认为您的问题的解决方案存在于Angular Elements.这是非常酷,由有远见的团队提供.

Angular Elements允许您将Angular组件打包为custom web elements,这是Web平台API的Web组件集的一部分.Web组件是帮助创建可重用的技术encapsulated elements.现在,它包括影子DOM,HTML模板,HTML导入和自定义元素.自定义元素技术的力量Angular Elements.

以下是一些参考链接,您可以从中了解更多信息Angular Elements.

https://angular.io/guide/elements

https://www.telerik.com/blogs/getting-started-with-angular-elements

谢谢!

Answer 3

我相信 Angular 6 Elements 将成为非角度应用程序的唯一选择。这是我所知道的唯一允许组件在角度之外执行的方法。

为了维护样式封装，可以使用 css 前缀：

:host

在组件的 .css 或 .scss 文件中。

如果您可以摆脱非角度要求，我会推荐 Angular CDK PortalHost 和 DomPortalHost。