我的团队开发了一个使用Angular 5的应用程序，已经在生产环境中运行了一段时间，但是最近我们被要求让该应用程序在公司拥有的其他三个站点中运行。其中一个站点是使用Angular6构建的SPA，另一个站点也是SPA，但使用的是Angular5，而另一个站点则使用一些旧的库，如jQuery。
管理层希望我们立即与使用Angular5的SPA集成，因此我们将整个应用程序导出为具有子路由的模块，让其他应用程序进行引导。
但我担心上述方法对于非Angular站点不起作用。这也会将两个应用程序紧密耦合，因为“宿主”应用程序需要知道我们应用程序的所有依赖项，而这并不是一个简单的应用程序（我认为它相当大），并安装它们。当两个应用程序需要同一个依赖项的不同版本时，会出现问题，更不用说我们需要在升级依赖项或框架本身时进行同步。我认为当嵌入应用程序到更多站点时，这种方法不可扩展。
我对于更通用的实现的第一个想法是将我们的应用程序升级到Angular 6并创建一个具有自定义元素的Web组件，但我们需要支持IE11和Edge，它们不支持本机封装，因此我们需要在使用应用程序的每个站点上进行测试，以确保它们不会破坏我们的样式，而且我不知道Web组件是否可以管理子路由。
另一个想法是使用iframe，但我的问题在于iframe如何调整大小以适应内容，并且如何从iframe内的'resident'应用程序向'host'应用程序添加子路由。
有更好的方法来实现我们需要做的事吗？
理想的解决方案应该允许我们的应用程序在多个站点中使用（每个站点提供特定的配置），而不必了解使用我们应用程序的站点。
感谢您的帮助。
companysite.com/myapp，我们的应用程序应该控制子路由：companysite.com/myapp/this/portion/is/ours该应用程序在一个站点中进行身份验证，但其他站点的身份验证是可选的，匿名用户也可以。我们不控制任何站点的身份验证，并且每个站点的身份验证方式都不同，例如在某个站点中它可能是一个cookie，而在另一个站点中它是一个Authorization: Bearer令牌。 - Jorge Rivera