如何在同一页面中运行多个独立的Angular应用？

我刚好在Angular 5.2版本折腾过类似的需求，给你分享下亲测可行的实现方案，完美解决同一页面嵌入两个独立Angular应用且互不干扰的问题。

核心思路 #

Angular其实是支持手动引导应用的，只是默认CLI生成的代码是自动查找根元素引导。我们只需要给第二个应用单独配置引导逻辑，指定对应的根元素，同时做好隔离配置就能实现两个应用共存。

具体实现步骤 #

1. 搭建第二个应用的代码结构 #

在同一个CLI项目里，先给第二个应用单独建一套模块和组件，比如在src/app下新建app-two文件夹：

// app-root-two.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root-two',
  template: `<h2>第二个独立Angular应用</h2>`,
})
export class AppRootTwoComponent {}

// app-two.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRootTwoComponent } from './app-root-two.component';

@NgModule({
  imports: [BrowserModule],
  declarations: [AppRootTwoComponent],
  bootstrap: [AppRootTwoComponent]
})
export class AppTwoModule {}

2. 配置第二个应用的手动引导入口 #

默认的main.ts是引导第一个应用的，我们给第二个应用单独创建入口文件main-two.ts，手动指定引导的根元素：

// main-two.ts
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppTwoModule } from './app/app-two/app-two.module';

// 先检查DOM中是否存在目标根元素，再手动引导
const targetRoot = document.querySelector('app-root-two');
if (targetRoot) {
  platformBrowserDynamic().bootstrapModule(AppTwoModule, {
    // 可选：设置ngZone为noop，避免两个应用的变更检测互相干扰
    ngZone: 'noop'
  }).catch(err => console.error(err));
}

3. 修改Angular CLI配置，支持多应用打包 #

修改.angular-cli.json的apps数组，添加第二个应用的配置，注意指定不同的输出目录，避免文件冲突：

{
  "apps": [
    // 保留第一个应用的原有配置
    {
      "name": "app-one",
      "root": "src",
      "outDir": "dist/app-one",
      "main": "main.ts",
      // ...其他原有配置
    },
    // 新增第二个应用的配置
    {
      "name": "app-two",
      "root": "src",
      "outDir": "dist/app-two",
      "main": "main-two.ts",
      "polyfills": "polyfills.ts",
      "tsconfig": "tsconfig.app.json",
      "assets": ["assets"],
      "styles": ["styles.css"],
      "scripts": []
    }
  ]
}

4. 打包并在同一页面加载两个应用 #

先分别打包两个应用：

ng build --app app-one
ng build --app app-two

然后在同一个index.html中（可以用第一个应用的index.html，也可以新建），同时插入两个应用的根元素并引入对应的脚本：

<!-- 第一个应用的根元素 -->
<app-root></app-root>
<!-- 第二个应用的根元素 -->
<app-root-two></app-root-two>

<!-- 引入第一个应用的打包脚本 -->
<script src="app-one/inline.bundle.js"></script>
<script src="app-one/polyfills.bundle.js"></script>
<script src="app-one/styles.bundle.js"></script>
<script src="app-one/vendor.bundle.js"></script>
<script src="app-one/main.bundle.js"></script>

<!-- 引入第二个应用的打包脚本 -->
<script src="app-two/inline.bundle.js"></script>
<script src="app-two/polyfills.bundle.js"></script>
<script src="app-two/styles.bundle.js"></script>
<script src="app-two/vendor.bundle.js"></script>
<script src="app-two/main.bundle.js"></script>

5. 确保应用隔离的关键注意事项 #

• Zone.js隔离：如果两个应用都用默认Zone.js，可能会导致变更检测互相影响，给第二个应用设置ngZone: 'noop'是个简单有效的办法。
• 样式隔离：给第二个应用的组件添加独特的CSS类前缀，或者使用Angular的ViewEncapsulation.None配合命名空间，避免样式污染。
• 全局变量冲突：如果两个应用共用第三方库（比如jQuery），要么确保版本兼容，要么分别打包避免冲突。

内容的提问来源于stack exchange，提问作者user2758141