如何在Angular父项目中以弹窗形式打开独立仓库的另一Angular项目

针对你方的需求，优先推荐无iframe、父应用低侵入的两种实现方案，均支持功能应用独立仓库迭代、优先使用Angular技术栈：

方案1：基于Angular自定义元素（Web Component）实现（优先推荐） #

该方案将功能打包为标准Web Component，父应用改造成本极低，完全符合独立迭代要求。

1.1 独立功能仓库开发配置 #

• 新建独立Angular项目，正常开发完整功能逻辑，将整个功能封装为单个独立组件（例如命名为ComplexFeatureComponent），所有对外交互通过@Input()（接收用户token、业务参数等）、@Output()（抛出关闭、操作完成等事件）定义。
• 安装Angular元素依赖：npm i @angular/elements
• 改造AppModule将组件注册为自定义元素：

import { NgModule, Injector } from '@angular/core';
import { createCustomElement } from '@angular/elements';
import { ComplexFeatureComponent } from './complex-feature/complex-feature.component';

@NgModule({
  declarations: [ComplexFeatureComponent],
  imports: [/* 功能所需的Angular基础模块，如CommonModule、表单模块等 */],
})
export class AppModule {
  constructor(private injector: Injector) {}

  ngDoBootstrap() {
    const featureElement = createCustomElement(ComplexFeatureComponent, { injector: this.injector });
    // 注册全局自定义元素标签，可自定义命名如<your-business-feature>
    customElements.define('your-business-feature', featureElement);
  }
}

• 用ngx-build-plus工具配置单文件打包，执行命令ng build --prod --output-hashing none --single-bundle true，最终产出单独的main.js打包文件。
• 将打包好的JS文件上传到内部静态资源服务，迭代时只需替换该文件即可。

1.2 父应用集成（侵入性极低） #

• 在父应用的index.html中引入打包好的静态JS：<script src="内部静态资源地址/main.vxxx.js"></script>，可通过资源名加版本号实现灰度更新。
• 在用到弹窗的业务模块中添加CUSTOM_ELEMENTS_SCHEMA，解决Angular对未知自定义标签的校验问题：

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

@NgModule({
  // 原有配置保持不变
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class YourBusinessModule { }

• 复用父应用现有弹窗组件（如Angular Material Dialog、NG-ZORRO Modal等已有能力），弹窗内容直接填入自定义元素标签即可：

<!-- 弹窗内容模板 -->
<your-business-feature 
  [userToken]="currentUser.token"
  [businessId]="currentRow.id"
  (close)="modal.close()"
  (submitSuccess)="handleSubmitResult($event)"
></your-business-feature>

• 给原有业务按钮加弹窗触发逻辑即可完成集成，无需修改其他现有代码。

该方案优点：功能完全独立迭代，父应用无需升级依赖即可自动同步最新版本，打包产物为标准Web Component，后续非Angular技术栈项目也可直接接入；自带Shadow DOM样式隔离，不会和父应用样式冲突。

方案2：独立Angular Library包方案（适合有内部npm私有源的场景） #

2.1 独立仓库开发 #

• 在独立仓库中创建Angular库工作区：ng new feature-workspace --create-application=false，进入工作区后执行ng generate library complex-business-feature生成库项目。
• 所有功能在库项目中开发完成后，执行ng build complex-business-feature --prod打包，将产物发布到内部npm私有源。

2.2 父应用集成 #

• 父应用执行安装命令：npm i @your-team-scope/complex-business-feature
• 在业务模块中导入功能库的模块，复用现有弹窗组件加载库内的功能组件即可。

该方案优点：和Angular生态完全兼容，类型提示完整；缺点是每次功能迭代，所有父应用都需要手动升级依赖版本，维护成本高于方案1。

• 单点登录逻辑无需改造，父应用直接将当前用户的登录态通过入参传给功能组件即可。
• 功能接口如果和父应用域名不一致，提前配置好跨域规则即可，无需额外适配。

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