31

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

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

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

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

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

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

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

谢谢你的帮助。

4

3 回答 3

38

2020 年更新

你也可以使用新的Webpack 5 Module federation。

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

原始答案

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

链接 ：

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

框架：

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

元框架：

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

Web 组件，即 Angular 元素：

为了处理 npm 包，您可以使用其他回答者提到的Angular 元素的概念。您必须创建一个外壳应用程序和另一个独立的应用程序，这些应用程序将在您的外壳应用程序中注册为元素。看看这个例子。：构建微前端——角度元素

Mosaiq：布局服务

网店Zalando也面临同样的问题，为了解决这个问题，创建了一个框架：

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

PS。Tailor 的灵感来自BigPipe： Facebook的高性能网页流水线。

插件架构

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

这个 Stackoverflow 问题在单页应用程序的情况下解释了更多关于它的信息：

角库

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

其他 Stackoverflow 相关问答：

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

微前端示例

关于微前端的资源列表

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

于 2018-10-09T10:44:27.610 回答
12

我认为您的问题的解决方案在于Angular Elements. 它非常酷，由 Angular 团队提供。

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

谢谢！

于 2018-10-08T07:29:17.273 回答
0

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

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

:host

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

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

于 2018-10-06T02:38:09.093 回答