我的团队开发了一个已投入 生产环境 一段时间的角度应用程序，但我们最近的任务是让应用程序在公司拥有的其他3个站点中运行 . 一个站点是使用Angular6构建的SPA，另一个站点是SPA但使用Angular5，而另一个站点使用一些较旧的库，如jQuery .
管理层希望我们立即与Angular5 SPA集成，因此我们只是将整个应用程序导出为具有子路由的模块，并让其他应用程序执行引导程序 .
但我担心上述方法不适用于非角度站点 . 由于“主机”应用程序需要知道我们的应用程序的所有依赖关系，这不是一个简单的应用程序（我会说相当大）并且安装它们，这导致两个应用程序需要不同版本的相同的依赖关系，更不用说我们需要在升级依赖项或框架本身时进行同步 . 在将应用程序嵌入更多站点时，我认为这种方法不会扩展 .
我对更一般实现的第一个想法是将我们的应用程序升级到Angular 6并使用自定义元素创建Web组件，但我们需要支持不支持本机封装的IE11和Edge，因此我们需要测试我们的应用程序使用它的每个站点，以确保它们不会破坏我们的样式，我也不知道Web组件是否可以管理子路由 .
其他想法是使用iframe，但我的问题是iframe调整大小以适应内容以及如何在'host'应用程序中从iframe中的'常驻'应用程序添加子路由 .
有没有更好的方法来实现我们需要做的事情？
理想的解决方案应该允许我们的应用程序在多个站点中使用（每个站点提供特定的配置），而无需我们使用我们的应用程序了解该站点 .
谢谢你的帮助 .
3 回答
我认为你的问题的解决方案在于
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
谢谢！
我最近一直忙于这个话题，因为很多人一次又一次地遇到同样的问题（当然，我） . 如今，你经常听到微前端的概念 . 该概念是关于将前端设计为可扩展和可扩展的 . 特别是在许多公司同时拥有 Angular 和 React 以及 Vue 开发人员的时候 . 我的研究得出以下方法：
Links ：
您可以创建新应用并从旧版应用中获得超链接 . （当您在两个应用程序之间切换时，必须重新加载页面 . ）
Iframes ：
软件架构师构建了一个元路由器来处理iframe和单页面应用程序：
看看这个：
Metaframeworks ：
单人水疗中心(official website) Single Spa: a javascript framework for front-end microservices
FrintJs (official website) FrintJS: Modular JavaScript framework for building Scalable & Reactive applications.
Web Components i.e Angular elements ：
为了处理npm包你可以使用另一个回答者提到Angular elements的概念 . 您必须创建一个shell应用程序和另一个独立的应用程序，这些应用程序将在您的shell应用程序中注册为元素 . 看看这个例子 . ：Building micro frontends — angular elements
Mosaiq: Layout service
在线商店
Zalando面临同样的问题并创建了一个框架来处理问题：特别是部分 Tailor.js ，一个开源系统，用于在 Go 中编写的后端层上按需组装组件 .
PS . Tailor的灵感来自Facebook的BigPipe: Pipelining web pages for high performance .
Plugin Architecture
This Stackoverflow question在单页应用的情况下解释更多关于它的信息：
Angular libraries
我认为正确的方法是在应用程序中使用相同的框架和相同版本的框架（例如Angular 7） . 我更愿意接受一次升级到角度的打字稿版本 . 我希望答案对其他人有用 .
Other Stackoverflow related Q & A ：
Vue.JS - micro frontend approach
Micro frontend architecture advice
我相信Angular 6 Elements将成为非角度应用程序的唯一选择 . 这是我所知道的唯一允许组件在角度之外执行的方法 .
为了保持样式封装，您可以使用css前缀：
在组件的.css或.scss文件中 .
如果你可以摆脱非角度要求，我会推荐Angular CDK PortalHost和DomPortalHost .