无需Webpack，基于esbuild在Angular中实现Module Federation

一、不依赖Webpack实现微前端架构的替代方案 #

1. 独立组件+路由懒加载（轻量微前端） #

• 把微应用拆成独立的Standalone组件或路由模块，主应用直接通过路由懒加载其他应用的构建产物。
• 主应用路由配置示例：

const routes: Routes = [
  {
    path: 'micro-app',
    loadComponent: () => import('http://localhost:4201/micro-app.component.mjs').then(m => m.MicroAppComponent)
  }
];

• 注意：子应用构建时要在angular.json里把outputOptions.format设为esm2022，确保输出ES模块格式。

2. Web Components微前端方案 #

• 将每个微应用打包成自定义元素（Web Components），主应用直接通过HTML标签引入使用。
• 子应用注册自定义元素示例（main.ts）：

import { createCustomElement } from '@angular/elements';
import { MicroAppComponent } from './app/micro-app.component';
import { bootstrapApplication } from '@angular/platform-browser';

bootstrapApplication(MicroAppComponent)
  .then(app => {
    const MicroAppElement = createCustomElement(MicroAppComponent, { injector: app.injector });
    customElements.define('micro-app-element', MicroAppElement);
  });

• 主应用模板中直接使用：

<micro-app-element></micro-app-element>

• 这种方式完全不依赖Webpack，依托Angular Elements特性，完美适配esbuild构建系统。

3. 原生ES模块联邦实现 #

• 利用浏览器原生ES模块导入能力，结合构建配置实现类似Module Federation的模块共享。
• 子应用angular.json配置导出共享模块：

{
  "projects": {
    "micro-app": {
      "architect": {
        "build": {
          "options": {
            "outputOptions": {
              "exports": ["src/app/shared/shared.module.ts"]
            }
          }
        }
      }
    }
  }
}

• 主应用直接导入子应用的共享模块：

import { SharedModule } from 'http://localhost:4201/shared.module.mjs';

二、独立Angular应用间的代码共享方案 #

1. 共享库模式 #

• 把公共代码提取成Angular库，通过npm私有仓或本地链接的方式，在各应用中安装使用。
• 创建共享库命令：

ng generate library shared-lib

• 构建库后，在其他应用中安装：

npm install ../shared-lib/dist/shared-lib

• 这是最稳定的代码共享方案，完全适配新的esbuild构建系统，和Webpack无关。

2. 动态导入共享ES模块 #

• 将共享代码打包成独立ES模块，部署到静态资源服务器，各应用通过动态导入加载使用。
• 构建共享模块时指定ES格式：

ng build shared-lib --format esm2022

• 应用中导入示例：

const { SharedService } = await import('https://cdn.example.com/shared-lib/shared-service.mjs');

3. 无Zone环境优化（可选） #

• 如果应用使用无Zone的变更检测，共享代码可以避免Zone相关依赖冲突，更适合跨应用共享。启动应用时配置：

bootstrapApplication(AppComponent, {
  providers: [provideExperimentalZonelessChangeDetection()]
});

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