Angular微前端联邦：为何无法用根模块AppModule配置Webpack暴露？

这个错误的核心是Angular的BrowserModule只能在整个应用的根模块中导入一次。BrowserModule包含了全局单例服务（比如Title、Meta）和DOM初始化相关的提供者，当你把MFE的AppModule作为远程模块加载到主应用时，AppModule里肯定已经导入了BrowserModule，而主应用的根模块也早就导入过它了，这就导致了提供者重复加载的冲突。

你需要拆分MFE的模块结构，把原本AppModule里的业务逻辑移到一个特性模块中，用CommonModule替代BrowserModule（CommonModule包含NgIf、NgFor等通用指令，且支持多次导入），再暴露这个特性模块给主应用加载。

步骤1：创建MFE的特性模块 #

在MFE项目中新建一个特性模块（比如RemoteAppFeatureModule），把原AppModule中的组件、路由等迁移过来：

// projects/mfe1/src/app/remote-app-feature/remote-app-feature.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { AppRoutingModule } from '../app-routing.module';
import { AppComponent } from '../app.component';
// 导入你需要的其他组件、服务等

@NgModule({
  declarations: [
    AppComponent
    // 其他业务组件
  ],
  imports: [
    CommonModule, // 用CommonModule替代BrowserModule
    AppRoutingModule
  ]
})
export class RemoteAppFeatureModule { }

步骤2：调整MFE的根模块（AppModule） #

让AppModule仅作为MFE独立运行时的入口，保留BrowserModule的导入（独立运行时它是根模块，必须导入），同时导入刚创建的特性模块：

// projects/mfe1/src/app/app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RemoteAppFeatureModule } from './remote-app-feature/remote-app-feature.module';

@NgModule({
  imports: [
    BrowserModule,
    RemoteAppFeatureModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

步骤3：修改webpack暴露配置 #

更新webpack.config.ts，暴露新的特性模块而非AppModule：

exposes: {
  './Module': './projects/mfe1/src/app/remote-app-feature/remote-app-feature.module.ts'
}

步骤4：调整主应用路由 #

修改主应用的app.routes.ts，加载这个新的特性模块：

// 主应用app.routes.ts
{
  path: 'mfe1', // 你的路由路径
  loadChildren: () => import('mfe1/Module').then(m => m.RemoteAppFeatureModule)
}

• 如果你需要MFE既能独立运行，又能作为微前端被加载，这种拆分方式是最优解：独立运行时AppModule作为根模块导入BrowserModule，被主应用加载时，主应用的根模块已经处理了BrowserModule，远程模块只用导入CommonModule即可。
• 绝对不要在多个模块中重复导入BrowserModule，这会破坏Angular的单例服务机制，引发各种难以排查的问题。

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