如何在Angular应用中调用其他Angular应用？多独立应用集成可行性咨询

当然可行！这种拆分多个独立Angular应用并在主仪表盘整合的场景，正好适合用微前端架构来实现。下面我给你详细拆解具体的实现思路和可落地的方案：

因为你的三个应用是独立仓库、独立部署的完整Angular应用，没法像调用本地组件那样直接引入，核心思路是通过微前端整合，让Dashboard作为「宿主应用」，按需加载并渲染另外两个「子应用」的内容，同时保持各自的开发独立性。

方案一：Angular Module Federation（官方推荐，Angular专属） #

从Angular 14开始，官方支持Webpack 5的Module Federation功能，这是专门为多Angular应用整合设计的方案，体验最顺滑。

步骤拆解： #

1. 配置子应用（Sales、Customer）为远程应用
   • 给每个子应用安装@angular-architects/module-federation工具，生成Module Federation配置文件
   • 修改子应用的mf.ts（或webpack配置），暴露需要被宿主加载的核心模块，比如：

     export default share({
       name: 'sales',
       exposes: {
         './SalesModule': './src/app/sales/sales.module.ts',
       },
       shared: shareAll({ singleton: true, strictVersion: true, requiredVersion: 'auto' }),
     });
     

2. 配置Dashboard为宿主应用
   • 同样给Dashboard安装Module Federation工具，在配置中声明子应用的部署地址：

     export default share({
       name: 'dashboard',
       remotes: {
         sales: 'sales@https://your-sales-app-url/remoteEntry.js',
         customer: 'customer@https://your-customer-app-url/remoteEntry.js',
       },
       shared: shareAll({ singleton: true, strictVersion: true, requiredVersion: 'auto' }),
     });
     

3. 在Dashboard中通过路由加载子应用
   • 在Dashboard的路由配置里，添加懒加载远程模块的规则：

     const routes: Routes = [
       { path: '', component: DashboardComponent },
       { 
         path: 'sales', 
         loadChildren: () => import('sales/SalesModule').then(m => m.SalesModule) 
       },
       { 
         path: 'customer', 
         loadChildren: () => import('customer/CustomerModule').then(m => m.CustomerModule) 
       },
     ];
     

   • 最后在Dashboard的模板里添加跳转链接即可：

     <nav class="dashboard-nav">
       <a routerLink="/sales">Sales</a> | <a routerLink="/customer">Customer</a>
     </nav>
     <router-outlet></router-outlet>
     

方案二：Single SPA（跨框架通用方案） #

如果未来你的技术栈可能扩展到React、Vue等其他框架，Single SPA会是更灵活的选择，它支持多种框架的微前端整合。

关键步骤： #

1. 创建Single SPA根配置应用
   这个应用是整个微前端的入口，负责注册和调度所有子应用，可以用纯JS或者Angular实现。
2. 适配Angular子应用
   给每个Angular子应用安装single-spa-angular，修改main.ts将应用注册为Single SPA子应用：

   import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
   import { singleSpaAngular, getSingleSpaExtraProviders } from 'single-spa-angular';
   import { AppModule } from './app/app.module';
   
   const lifecycles = singleSpaAngular({
     bootstrapFunction: () => 
       platformBrowserDynamic(getSingleSpaExtraProviders()).bootstrapModule(AppModule),
     template: '<app-root></app-root>',
     Router,
     NavigationStart,
   });
   
   export const bootstrap = lifecycles.bootstrap;
   export const mount = lifecycles.mount;
   export const unmount = lifecycles.unmount;
   

3. 在根配置中注册子应用
   在根配置里定义路由规则，当访问/sales时加载Sales应用，访问/customer时加载Customer应用。

方案三：iframe（快速但有局限性） #

如果不想折腾复杂的微前端配置，iframe是最快速的临时方案，但会有路由同步、样式隔离、通信繁琐等问题，适合简单场景。

实现方式： #

• 在Dashboard组件中，通过点击链接切换iframe的地址：

  <nav>
    <a (click)="setCurrentApp('sales')">Sales</a> | <a (click)="setCurrentApp('customer')">Customer</a>
  </nav>
  <iframe *ngIf="currentAppUrl" [src]="currentAppUrl" width="100%" height="calc(100vh - 60px)" frameborder="0"></iframe>
  

• 对应的组件逻辑：

  currentAppUrl: string | null = null;
  
  setCurrentApp(app: string) {
    this.currentAppUrl = app === 'sales' ? 'https://your-sales-app-url' : 'https://your-customer-app-url';
  }
  

• 注意：需要在子应用的服务器配置中允许被Dashboard的域名嵌入（比如设置X-Frame-Options响应头）。

• 独立部署：三个应用可以分别部署到不同服务器，宿主只需要知道子应用的线上地址即可，互不影响开发和发布。
• 样式隔离：避免子应用样式污染宿主，可开启Angular的ViewEncapsulation.ShadowDom，或者在Module Federation中配置样式隔离。
• 应用通信：如果宿主和子应用需要传递数据，可以用浏览器自定义事件、Module Federation共享模块，或者Single SPA的props传递机制。
• 版本兼容：尽量保持所有Angular应用的大版本一致（比如都是16.x），避免框架版本差异导致的兼容性问题。

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