在一页中运行多个 Angular 应用程序答案

【问题标题】：Run multiple Angular app in One page在一页中运行多个 Angular 应用程序
【发布时间】：2020-05-07 21:08:42
【问题描述】：

假设页面中已经存在一个正在运行的 Angular。我想向其中注入/添加一个隔离的角度应用程序（它与现有的角度应用程序隔离运行而不受干扰）。

例如，我想 1) 在页面中插入一个自定义元素，例如 <app-root-two></app-root-two>，然后 2) 初始化/引导该应用程序（反之亦然）。

我将如何实现这一目标？

我知道在 AngularJs 中这是可能的，因为您可以检索 DOM 元素并使用 angular.boostrap(<dom-element>) 对其进行初始化，但我不认为 Angular 具有相同的手动引导模式。它是抽象的，它直接进入 DOM 以查找根元素，通常是页面中的<app-root>。

我正在使用的当前 Angular 版本是 5.2 版和 Angular CLI 1.6.6。我已经尝试使用.angular-cli.json 文件来生成多个应用程序，但是它针对两个单独的“index.html”文件，即一个项目中的两个应用程序，不一定在一页中。

【问题讨论】：

自然搜索索引有多重要？我会在主容器应用程序中使用 iframe，每个应用程序都有单独的视图和子路由。
也看看这个github.com/angular/angular/issues/16930，看起来团队正在考虑这是一个功能请求
检查了现有文档的 Angular 并建议在同一页面中拥有 >1 个应用程序不是一个好主意，因此会留下这个问题而没有正确答案。除非 Angular 具有类似 jQuery.noConflict 的机制，否则也许有可能
@HunterFrazier 你好。您是否有加载多个 Angular 应用程序的 iFrame 解决方案示例：？谢谢
对不起帕斯卡，我没有。不过，我过去已经实现了这样的功能，基本上是这样的。使用代理（最好在服务器层（Nginx）而不是 Angular 的内置路由代理别名或其他名称）将子目录位置（例如 /app2）重定向到您的辅助应用程序（例如 localhost:4201）。这将允许您在本地、相对寻址的 iframe（例如 src="/app2"）中提供第二个应用程序，这将有助于解决性能和跨域请求问题。从那里我想可能性是无穷无尽的！我说，iframe 整天是唯一的方法

标签： javascript angular

【解决方案1】：

您需要在第二个 AppModule 上使用不同的根元素。然后只需导入您的第二个应用脚本（运行时、样式等），但首先导入 delete window.webpackJsonp。

例如

<app-one></app-one>
<app-two></app-two>

<script type="text/javascript" src="app-one/runtime.js"></script>
<script type="text/javascript" src="app-one/es2015-polyfills.js" nomodule></script>
<script type="text/javascript" src="app-one/polyfills.js"></script>
<script type="text/javascript" src="app-one/styles.js"></script>
<script type="text/javascript" src="app-one/vendor.js"></script>
<script type="text/javascript" src="app-one/main.js"></script>

<script>delete window.webpackJsonp</script>

<script type="text/javascript" src="app-two/runtime.js"></script>
<script type="text/javascript" src="app-two/es2015-polyfills.js" nomodule></script>
<script type="text/javascript" src="app-two/polyfills.js"></script>
<script type="text/javascript" src="app-two/styles.js"></script>
<script type="text/javascript" src="app-two/vendor.js"></script>
<script type="text/javascript" src="app-two/main.js"></script>

虽然 - 迄今为止 - 这是可行的，但该框架显然不是为此而设计的。具有进一步分块的更复杂的应用程序可能会在删除 webackJsonp 对象时实质上更改应用程序的运行时问题。

转到全局原型的 Polyfill，您可以跳过重新导入。

【讨论】：

同样可以通过github.com/angular/angular-cli/issues/…提到的建议实现
此线程有最新更新吗？ Angular 是否正式提供任何方式来支持这一点？

【解决方案2】：

看看overall-structural-guidelines

您可以简单地加载一个应用程序，但可以编排（延迟加载）许多不同的模块，这些模块将充当应用程序。每个子主要模块将具有它需要的所有模块、服务、组件等，并且将被隔离。

【讨论】：

谢谢@mehany。但是，此解决方案确实有效，但只有当您完全控制这两个应用程序时。我正在寻求的解决方案是说当您无法控制页面中已有的现有应用程序时。

【解决方案3】：

查看源代码后，我不得不做一些重写。 AngularJs 自动做两件事：1）引导任何“ng-app” 2）添加标签。以防止任何冲突。我把这两个部分都注释掉了。相反，我将标签的内容放入我的 scss 文件并手动引导我的自定义元素

另一件事是 Angularjs 是在 chrome 扩展内容脚本的上下文中加载的，因此直接在内容脚本中定义的任何窗口全局都不会渗入用户页面。

最重要的是，我确实使用了 shadow dom 来进一步隔离应用程序，以便没有 css/js 东西流入/流出。只要我不修改页面的任何常见方面，我应该没问题，例如地点。我需要根据生命周期添加/删除的任何全局事件绑定。最终结果将如下所示：

<custom-element>
   #shadow-dom
      <!-- stylesheet if any -->
      <!-- js script if any -->
      <bootstrapped-angular-element>

【讨论】：