Angular微前端：跨MFE传递对象时selectedObject为何为null？

我正在开发微前端项目，尝试通过服务中的BehaviorSubject（Observable）将对象值从mfe1传递到mfe2。mfe1中传递值时对象已成功存储，但mfe2订阅同一Observable时，获取到的selectedObject值为null。

相关代码及配置 #

mfe1 业务代码 #

navigateFromCatalog(selectedObject: ConnectionList, screen: string): void {
    this.analyticsDataService.changeMessage(selectedObject);
    if (screen === 'analytics') {
      this.router.navigate(['/advisory/analytics']);
    } else {
      this.router.navigate(['/advisory/modelling']);
    }
}

共享服务 AnalyticsDataService #

export class AnalyticsDataService {
  private messageSource = new BehaviorSubject(null);
  currentMessage = this.messageSource.asObservable();

  constructor(){}

  changeMessage(message: Object) {
    this.messageSource.next(message);
    console.log("msg changed : ",this.messageSource); // 此处值已成功存储
  }
}

mfe2 订阅代码 #

this.analyticsDataService.currentMessage.subscribe((selectedObject) => {
    console.log("current obj : ", selectedObject) // 此处获取值为null
})

mfe1 的webpack配置 #

const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");
const mf = require("@angular-architects/module-federation/webpack");
const path = require("path");
const share = mf.share;

const sharedMappings = new mf.SharedMappings();
sharedMappings.register(
  path.join(__dirname, '../../tsconfig.json'),
  [
    '@shared'
  ]);

module.exports = {
  output: {
    uniqueName: "advisory",
    publicPath: "auto"
  },
  optimization: {
    runtimeChunk: false
  },   
  resolve: {
    alias: {
      ...sharedMappings.getAliases(),
    }
  },
  experiments: {
    outputModule: true
  },
  plugins: [
    new ModuleFederationPlugin({
        library: { type: "module" },

        // For remotes (please adjust)
        name: "advisory",
        filename: "advisoryremoteEntry.js",
        exposes: {
            './Advisory': './projects/advisory/src/app/advisory/advisory.module.ts',
        },        
        
        // For hosts (please adjust)
        remotes: {
            "analytics" : "http://localhost:4202/analyticsremoteEntry.js",
        }
    })
  ]
};

mfe2 的webpack配置 #

const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");
const mf = require("@angular-architects/module-federation/webpack");
const path = require("path");
const share = mf.share;

const sharedMappings = new mf.SharedMappings();
sharedMappings.register(
  path.join(__dirname, '../../tsconfig.json'),
  [
    '@shared'
  ]);

module.exports = {
  output: {
    uniqueName: "analytics",
    publicPath: "auto"
  },
  optimization: {
    runtimeChunk: false
  },   
  resolve: {
    alias: {
      ...sharedMappings.getAliases(),
    }
  },
  experiments: {
    outputModule: true
  },
  plugins: [
    new ModuleFederationPlugin({
        library: { type: "module" },

        // For remotes (please adjust)
        name: "analytics",
        filename: "analyticsremoteEntry.js",
        exposes: {
            './Analytics': './projects/analytics/src/app/analytics/analytics.module.ts',
        },
    })
  ]
};

原因及解决方案 #

核心原因 #

微前端中每个MFE是独立的应用实例，默认情况下共享服务会被每个MFE分别实例化，mfe1和mfe2中的AnalyticsDataService是完全独立的两个实例，BehaviorSubject的状态无法跨实例共享，因此mfe2订阅的是自己实例中的BehaviorSubject，初始值为null。

解决步骤 #

1. 配置单例共享依赖
   在两个MFE的webpack配置中，必须在ModuleFederationPlugin的shared选项中明确声明@shared为单例共享，确保服务只被实例化一次：

   plugins: [
     new ModuleFederationPlugin({
       // ... 其他原有配置
       shared: share({
         '@shared': {
           singleton: true, // 强制单例
           strictVersion: false,
           requiredVersion: 'auto'
         },
         // 若依赖Angular核心包，也需确保单例
         '@angular/core': {
           singleton: true,
           strictVersion: false,
           requiredVersion: 'auto'
         }
       })
     })
   ]
   

2. 确保服务为根注入单例
   修改AnalyticsDataService的注入配置，使用providedIn: 'root'确保服务在整个应用中是单例：

   @Injectable({
     providedIn: 'root' // 根注入，保证全局单例
   })
   export class AnalyticsDataService {
     private messageSource = new BehaviorSubject(null);
     currentMessage = this.messageSource.asObservable();
   
     constructor(){}
   
     changeMessage(message: Object) {
       this.messageSource.next(message);
       console.log("msg changed : ",this.messageSource);
     }
   }
   

3. 验证订阅时机
   确保mfe2的订阅操作在mfe1发送值之后执行。如果需要获取BehaviorSubject的当前值，可直接访问其value属性（需先判断类型）：

   import { BehaviorSubject } from 'rxjs';
   
   // mfe2中获取当前值
   const subject = this.analyticsDataService.currentMessage as BehaviorSubject<any>;
   const currentValue = subject?.value;
   console.log("当前值:", currentValue);
   

4. 避免路由导致的实例重置
   若通过路由导航加载mfe2，单例共享服务的状态会在导航后保留，无需额外处理；若仍出现问题，检查是否在路由模块中重复提供了该服务。

内容的提问来源于stack exchange，提问作者Syed Shahid S