Angular微前端中Module Federation共享服务数据通信故障排查

问题背景 #

宿主应用运行在4500端口，已引入远程应用。远程应用通过Subject创建共享服务，Webpack配置已完成，但宿主应用订阅该服务后无法接收数据，预期实现远程输入的用户名同步到宿主应用。

相关代码片段 #

宿主应用（app.component.ts） #

dataReceived: any;

ngOnInit() {
    this.SharedService.subject$.subscribe((data: any) => {
        this.dataReceived = data;
    });
}

远程应用（shared.service.ts） #

subject$ = new Subject<string>();

sendData(val: string) {
    this.subject$.next(val);
}

远程应用（remote.component.ts） #

nameOfUser: any = 'Mark Doe';

setName() {
    this.sharedService.sendData(this.nameOfUser);
}

远程应用HTML（remote.component.html） #

<div>
    <label>Enter name:</label>
    <input type="text" name="uName" [(ngModel)]="nameOfUser" (click)="setName()">
    <button>Send Data</button>
</div>

排查思路 #

• 检查共享服务单例性：微前端场景下，若宿主与远程应用各自实例化共享服务，会导致Subject不是同一个实例，数据无法跨应用传递。
• 验证Webpack共享配置：确认webpack.config.js中是否将共享依赖（如rxjs、自定义共享库）配置为单例，避免重复打包产生多实例。
• 检查Subject特性：Subject不会保存历史数据，若宿主在远程发送数据后才订阅，将无法接收之前的消息；需改用BehaviorSubject。
• 核对事件触发逻辑：当前远程HTML中setName()绑定在输入框的click事件上，而非按钮，用户操作路径不符合预期，可能导致数据未发送。
• 确认服务注入正确性：宿主应用是否正确导入并注入远程的共享服务，模块声明是否完整。

解决方案 #

1. 确保共享服务全局单例并改用BehaviorSubject #

修改远程应用的shared.service.ts，使用BehaviorSubject保存最新值，并通过模块forRoot提供单例：

import { Injectable, BehaviorSubject } from '@angular/core';
import { Observable } from 'rxjs';

@Injectable()
export class SharedService {
  private _subject$ = new BehaviorSubject<string>('');
  // 对外暴露Observable，避免外部直接调用next()
  public subject$: Observable<string> = this._subject$.asObservable();

  sendData(val: string) {
    this._subject$.next(val);
  }
}

在远程应用的共享模块中配置单例：

import { NgModule, ModuleWithProviders } from '@angular/core';
import { SharedService } from './shared.service';

@NgModule({})
export class SharedModule {
  static forRoot(): ModuleWithProviders<SharedModule> {
    return {
      ngModule: SharedModule,
      providers: [SharedService]
    };
  }
}

宿主应用导入SharedModule时调用forRoot()，确保全局单例：

import { SharedModule } from 'remoteApp/shared/module';

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

2. 修正Webpack共享配置 #

在宿主与远程应用的webpack.config.js中，将核心依赖配置为单例共享：

const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');

module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      // 宿主应用配置示例
      name: 'host',
      remotes: {
        remoteApp: 'remoteApp@http://localhost:xxxx/remoteEntry.js'
      },
      shared: {
        '@angular/core': { singleton: true, strictVersion: true },
        '@angular/common': { singleton: true, strictVersion: true },
        '@angular/forms': { singleton: true, strictVersion: true },
        'rxjs': { singleton: true, strictVersion: true }
      }
    })
  ]
};

远程应用的webpack.config.js需对应配置相同的共享依赖，确保依赖单例。

3. 修正事件绑定逻辑 #

将远程HTML中的setName()绑定到按钮的click事件，符合用户操作预期：

<div>
    <label>Enter name:</label>
    <input type="text" name="uName" [(ngModel)]="nameOfUser">
    <button (click)="setName()">Send Data</button>
</div>

4. 确认宿主应用服务注入与订阅 #

确保宿主应用正确注入共享服务并订阅：

import { Component, OnInit } from '@angular/core';
import { SharedService } from 'remoteApp/shared/service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent implements OnInit {
  dataReceived: any;

  constructor(private sharedService: SharedService) {}

  ngOnInit() {
    this.sharedService.subject$.subscribe((data: string) => {
      this.dataReceived = data;
    });
  }
}

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