Webpack Module Federation共享Angular库自定义MatFormFieldControl问题

我用Webpack Module Federation将Angular 17前端应用拆分为多个微前端，每个微前端对应独立业务域以实现独立部署。各微前端仅共享@common-frontend组件库，配置如下：

shared: {
    "@common-frontend": { singleton: false, strictVersion: false },
}

该配置原本能确保各微前端使用自身版本的@common-frontend，运行正常。

但在@common-frontend中添加自定义Angular Material表单控件后出现问题。现有宿主应用A及远程应用B、C：

• 场景1：B、C使用不同版本@common-frontend时，切换应用可动态加载对应版本的库，一切正常；
• 场景2：B、C使用相同版本@common-frontend时，首次访问的应用会加载库资源，切换到另一应用时因缓存未重新加载，自定义表单控件出现错误：

Error: mat-form-field must contain a MatFormFieldControl.

仅mat-form-field相关控件受影响，其他组件正常。推测问题源于Angular注入上下文未在微前端间正确共享或初始化，页面刷新可解决但不适用于生产环境。

我的目标 #

• 每个业务域对应独立Angular应用；
• 微前端可独立部署且不影响其他应用；
• 所有微前端共享@common-frontend库。

疑问 #

1. 该问题是否与Webpack Module Federation的使用方式相关？
2. 有无更优方案实现目标并避免注入问题？
3. 微前端间共享Angular库需遵循哪些特定规范或模式？

项目配置 #

除@common-frontend版本可变外，其余依赖版本一致。

远程应用webpack.config.js #

const { withModuleFederationPlugin } = require('@angular-architects/module-federation/webpack');
const deps = require('./package.json').dependencies;

module.exports = withModuleFederationPlugin({

  name: 'micro-frontend-a',

  exposes: {
    './ARootModule': './src/app/root/root.module.ts',
  },

  shared: {
    "@common-frontend": { singleton: false, strictVersion: false },

    "@angular-architects/module-federation": { singleton: true, strictVersion: true, requiredVersion: deps['@angular-architects/module-federation'] },
    "@angular/animations": { singleton: true, strictVersion: true, requiredVersion: deps['@angular/animations'] },
    "@angular/common": { singleton: true, strictVersion: true, requiredVersion: deps['@angular/common'] },
    "@angular/common/http": { strictVersion: true },
    "@angular/compiler": { singleton: true, strictVersion: true, requiredVersion: deps['@angular/compiler'] },
    "@angular/core": { singleton: true, strictVersion: true, requiredVersion: deps['@angular/core'] },
    "@angular/forms": { singleton: true, strictVersion: true, requiredVersion: deps['@angular/forms'] },
    "@angular/platform-browser": { singleton: true, strictVersion: true, requiredVersion: deps['@angular/platform-browser'] },
    "@angular/platform-browser-dynamic": { singleton: true, strictVersion: true, requiredVersion: deps['@angular/platform-browser-dynamic'] },
    "@angular/router": { singleton: true, strictVersion: true, requiredVersion: deps['@angular/router'] },
    "@angular/material": { singleton: true, strictVersion: true, requiredVersion: deps['@angular/material'] },
    "@angular/cdk": { singleton: true, strictVersion: true, requiredVersion: deps['@angular/cdk'] },

    (...)
  }
});

宿主应用路由配置（app.routes.ts） #

宿主应用webpack.config.js无exposes配置，通过路由加载远程模块：

{
    loadChildren: () =>
      loadRemoteModule({
        exposedModule: './ARootModule',
        remoteEntry: environment.remote.a.url,
        type: 'module'
      }),
    path: 'a'
},

1. 问题是否与Webpack Module Federation的使用方式相关？ #

是的。问题核心在于@common-frontend的singleton: false配置：当多个微前端使用同版本库时，Webpack会复用已加载的模块实例，但Angular的依赖注入（DI）上下文与模块加载环境绑定。自定义Material表单控件需要注册MatFormFieldControl令牌，首次加载的微前端会在自身DI容器中注册该令牌，切换到另一微前端时，复用的库实例会尝试在当前微前端的DI容器中查找令牌，因注册上下文不匹配导致识别失败，抛出错误。

2. 更优方案实现目标并避免注入问题 #

方案一：调整@common-frontend的共享策略 #

若允许同版本共享，将@common-frontend设为单例（singleton: true），同时保持strictVersion: false。这样同版本库仅加载一次，所有微前端共用同一实例，DI上下文统一，避免令牌不匹配问题。注意：

• 所有微前端使用的@common-frontend版本需兼容，避免版本冲突；
• 升级@common-frontend时需确保所有微前端能兼容，否则可能出现兼容性问题。

方案二：为每个微前端隔离DI上下文 #

保持singleton: false，在@common-frontend的自定义控件模块中使用forRoot()模式提供MatFormFieldControl的注册，确保每个微前端加载库时，都会在自身DI容器中重新注册令牌。示例：

// @common-frontend中的自定义控件模块
import { NgModule, ModuleWithProviders } from '@angular/core';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MyCustomControlComponent } from './my-custom-control.component';
import { MAT_FORM_FIELD_CONTROL } from '@angular/material/form-field';

@NgModule({
  imports: [MatFormFieldModule],
  declarations: [MyCustomControlComponent],
  exports: [MyCustomControlComponent]
})
export class CommonCustomControlsModule {
  static forRoot(): ModuleWithProviders<CommonCustomControlsModule> {
    return {
      ngModule: CommonCustomControlsModule,
      providers: [
        {
          provide: MAT_FORM_FIELD_CONTROL,
          useExisting: MyCustomControlComponent,
          multi: true
        }
      ]
    };
  }
}

每个微前端导入该模块时调用forRoot()：

// 微前端B/C的根模块
import { CommonCustomControlsModule } from '@common-frontend';

@NgModule({
  imports: [
    // 其他模块
    CommonCustomControlsModule.forRoot()
  ]
})
export class BRootModule {}

方案三：使用模块联邦的eager加载策略 #

在@common-frontend的共享配置中添加eager: true，确保每个微前端加载时都会重新初始化库的DI上下文，但这会增加加载体积，仅适合小型组件库：

shared: {
    "@common-frontend": { singleton: false, strictVersion: false, eager: true },
}

3. 微前端间共享Angular库的规范/模式 #

• 核心Angular依赖必须单例：@angular/core、@angular/forms、@angular/material这类核心库必须设为singleton: true，否则会出现多个DI容器实例，导致路由、表单等核心功能异常；
• 共享库的DI注册需兼容多实例场景：若共享库包含自定义服务、指令或控件，需使用forRoot()/forChild()模式，确保每个微前端能独立注册DI令牌；
• 版本管理策略：对于共享库，要么强制统一版本（strictVersion: true），要么允许兼容版本（strictVersion: false），避免因版本差异导致模块冲突；
• 避免全局状态污染：共享库中不要使用全局变量或单例状态（除非设计为全局共享），确保每个微前端的状态隔离；
• 模块联邦配置一致性：所有微前端的共享依赖配置（除版本可变的库外）需保持一致，避免核心库出现多实例。

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