如何在AngularApp1中嵌入并展示独立Github仓库的AngularApp2？

你已经通过git submodule管理了两个项目的代码，但Angular本身不会自动识别并加载另一个独立项目，下面是两种可落地的集成方式：

方案一：静态资源打包+iframe嵌入/页面跳转 #

这种方式适合快速实现，无需修改AngularApp2的代码结构

步骤1：构建AngularApp2到AngularApp1的资源目录 #

进入AngularApp2的submodule目录，执行构建命令，将产物输出到AngularApp1的assets文件夹：

ng build --output-path ../AngularApp1/src/assets/angular-app2 --base-href /assets/angular-app2/

--base-href参数确保AngularApp2的资源能正确加载，避免路径错误。

步骤2：在AngularApp1中实现展示/跳转 #

方式A：直接跳转页面

在AngularApp1的组件模板中添加按钮，点击后跳转至AngularApp2的静态页面：

<button (click)="openApp2Page()">打开AngularApp2</button>

组件类中实现跳转逻辑：

openApp2Page(): void {
  window.location.href = '/assets/angular-app2/index.html';
}

方式B：iframe嵌入（页面内展示）

在AngularApp1的组件模板中通过iframe嵌入AngularApp2，配合开关控制显示：

<button (click)="toggleApp2()">切换AngularApp2显示</button>
<iframe *ngIf="isApp2Visible" 
        src="/assets/angular-app2/index.html" 
        width="100%" 
        height="calc(100vh - 80px)"
        frameborder="0">
</iframe>

组件类中添加状态控制：

isApp2Visible = false;

toggleApp2(): void {
  this.isApp2Visible = !this.isApp2Visible;
}

方案二：将AngularApp2打包为Web Components（自定义元素） #

这种方式更优雅，能让AngularApp2像普通Angular组件一样嵌入到AngularApp1中，无页面跳转

步骤1：配置AngularApp2支持自定义元素 #

1. 安装依赖：

npm install @angular/elements --save

2. 修改AngularApp2的app.module.ts，将根组件转为自定义元素：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, Injector } from '@angular/core';
import { createCustomElement } from '@angular/elements';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  providers: [],
  bootstrap: [] // 取消自动bootstrap，改为自定义元素
})
export class AppModule {
  constructor(private injector: Injector) {
    // 创建自定义元素并注册到浏览器
    const app2Element = createCustomElement(AppComponent, { injector });
    customElements.define('angular-app2', app2Element);
  }

  ngDoBootstrap() {} // 空实现，避免Angular报错
}

3. 构建AngularApp2为单bundle：

ng build --output-path ../AngularApp1/src/assets/app2-elements --single-bundle true

步骤2：在AngularApp1中引入并使用 #

1. 修改AngularApp1的angular.json，将AngularApp2的bundle添加到脚本列表：

"architect": {
  "build": {
    "options": {
      "scripts": [
        "src/assets/app2-elements/main.js"
      ]
    }
  }
}

2. 在AngularApp1的组件模板中直接使用自定义元素：

<button (click)="toggleApp2()">切换AngularApp2</button>
<angular-app2 *ngIf="isApp2Visible"></angular-app2>

3. 组件类中添加状态控制：

isApp2Visible = false;

toggleApp2(): void {
  this.isApp2Visible = !this.isApp2Visible;
}

注意事项 #

• 每次AngularApp2更新后，需在AngularApp1中执行git submodule update --remote拉取最新代码，然后重新构建AngularApp2并更新到AngularApp1的资源目录
• 使用自定义元素时，确保AngularApp2和AngularApp1的Angular版本兼容，避免依赖冲突
• 若出现资源加载失败，检查--base-href是否配置正确，或浏览器控制台的报错信息定位问题

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