Angular 14模块联邦：解决子父应用模块重复加载问题

核心原因 #

• 壳应用已加载BrowserModule，子应用重复引入会触发全局提供者重复注册错误
• 移除BrowserModule后，子应用缺少编译相关依赖，导致Compiler注入失败

解决方案 #

1. 子应用改造：用懒加载模块替代根模块暴露 #

子应用不要直接暴露AppModule，新建一个懒加载入口模块（如ChildEntryModule），规避根模块的全局依赖：

新增懒加载入口模块

// src/app/child-entry/child-entry.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule, Routes } from '@angular/router';
import { AppComponent } from '../app.component';

const routes: Routes = [
  { path: '', component: AppComponent }
];

@NgModule({
  declarations: [AppComponent], // 若AppComponent已在AppModule声明，可移至此处
  imports: [
    CommonModule, // 用CommonModule替代BrowserModule，不含全局提供者
    RouterModule.forChild(routes)
  ]
})
export class ChildEntryModule { }

修改子应用模块联邦配置

将暴露的模块替换为新建的懒加载模块：

module.exports = withModuleFederationPlugin({
  name: 'childapp',
  exposes: {
    './app1': './src/app/child-entry/child-entry.module.ts', // 更新为新模块路径
  },
  shared: {
    ...shareAll({ singleton: true, strictVersion: true, requiredVersion: 'auto' }),
  },
});

2. 调整子应用根模块 #

保留AppModule作为独立运行的入口，仅在子应用单独启动时生效：

// src/app/app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { RouterModule } from '@angular/router';

@NgModule({
  declarations: [
    // 若ChildEntryModule已声明AppComponent，此处可移除
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    RouterModule.forRoot([])
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

3. 更新壳应用路由加载目标 #

修改壳应用路由的模块导出引用，指向新的懒加载模块：

{
  path: 'my-child-path',
  loadChildren: () =>
    loadRemoteModule({
      type: 'module',
      remoteEntry: 'http://localhost:8001/remoteEntry.js',
      exposedModule: './app1',
    }).then((m) => m.ChildEntryModule), // 替换为ChildEntryModule
},

关键说明 #

• CommonModule仅提供通用指令（如*ngIf），不含全局提供者，避免与壳应用的BrowserModule冲突
• 子应用的BrowserModule和BrowserAnimationsModule仅在独立运行时加载，被壳应用引入时不会触发重复注册
• 若需动画支持，确保壳应用已引入BrowserAnimationsModule，避免重复加载

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