我的团队开发了一个已投入生产一段时间的angular 5应用程序，但是最近我们受命让该应用程序在公司拥有的其他3个站点上运行。一个站点是使用Angular6构建的SPA，另一个站点也是SPA，但使用Angular5，而另一个站点则使用一些较旧的库，例如jQuery。
管理层希望我们立即与Angular5 SPA集成，因此我们只是将整个应用程序导出为带有子路由的模块，然后让其他应用程序进行引导。
但是，恐怕上述方法不适用于非角度站点。这也使这两个应用程序紧密耦合，因为“主机”应用程序需要了解我们应用程序的所有依赖关系，而这并不是一个琐碎的应用程序（我想说是相当大的），然后安装它们，这会在两个应用程序需要不同版本的应用程序时引起问题相同的依赖关系，更不用说在升级依赖关系或框架本身时需要同步。我认为将应用程序嵌入更多网站时这种方法不会扩展。
我想实现更通用的实现的第一个想法是将我们的应用程序升级到Angular 6并使用自定义元素创建一个Web组件，但是我们需要支持不支持本机封装的IE11和Edge，因此我们需要进行测试我们在每个使用它的站点中使用我们的应用程序，以确保它们不会破坏我们的样式，我也不知道Web组件是否可以管理子路径。
其他想法是使用iframe，但我的问题是调整iframe的大小以适应内容，以及如何从iframe中的“居民”应用程序在“主机”应用程序中添加子路由。
是否有更好的方法来实现我们需要做的事情？
理想的解决方案应允许我们的应用程序在多个站点中使用（每个站点都提供特定的配置），而无需我们使用我们的应用程序来了解该站点。
感谢您的帮助。
答案 0 :(得分：6)
我认为您的问题的解决方案位于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
谢谢！
答案 1 :(得分：6)
最近我一直在忙于这个话题，因为许多人一次又一次地遇到相同的问题（当然是我）。如今，您经常听到微前端的概念。这个概念是关于将前端设计为可扩展和可扩展的。特别是在许多公司同时拥有 Angular 和 React 和 Vue 开发人员的时代。 我的研究提出了以下方法：
链接：
您可以创建新应用，并从旧版应用中获取超链接。 （在两个应用之间切换时，必须重新加载页面。）
iframes ：
一位软件架构师构建了一个元路由器来处理iframe和单页应用程序：
看看这个：
元框架：
通过Metaframeworks，您可以在使用不同框架构建的
differents应用之间进行沟通：
这里有一些用于 microfrontend 目的的metaframeworks示例。
Web组件即Angular元素：
为了处理npm软件包，您可以将Angular elements的概念用作另一个回答者。您必须创建一个Shell应用程序和另一个独立的应用程序，这些应用程序将被注册为您的Shell应用程序中的元素。 看一下这个例子。：Building micro frontends — angular elements
Mosaiq：布局服务
在线商店Zalando面临相同的问题，并创建了一个框架来处理该问题：
尤其是零件 Tailor.js ，这是一个开源系统，用于在以 Go 编写的后端层上按需组装组件。
PS。裁缝的灵感来自Facebook的 BigPipe: Pipelining web pages for high performance 。
插件架构
插件体系结构是一种可以在某些时候调用外部代码而无需事先知道该代码的所有细节的体系结构。
This Stackoverflow question在单页应用程序中详细说明：
角度库
我认为正确的方法是在应用中使用相同的框架和该框架的相同版本（例如Angular 7）。我宁愿花一点时间来升级angular的打字稿版本。我希望答案对其他人有用。
其他与Stackoverflow相关的常见问题解答：
Vue.JS - micro frontend approach
Micro frontend architecture advice
答案 2 :(得分：0)
我相信Angular 6 Elements将成为非Angular应用程序的唯一选择。这是我所知道的唯一允许组件在angular之外执行的方法。
为了保持样式封装，可以使用css前缀：
:host
在组件的.css或.scss文件中。
如果您可以摆脱对非角度的要求，我建议您使用角度CDK PortalHost和DomPortalHost。