0

I'm working on micro frontends. and I'm passing one object value from one mfe to another ( say mfe1 to mfe2 ) using Behavior subject (observable) in service.

when i pass the value from mfe1, the object is storing the value. but when i subscribe to the same observable from mfe2, the value is 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); // the value is stored.
  }

mfe2

this.analyticsDataService.currentMessage.subscribe((selectedObject) => {
        console.log("current obj : ", selectedObject) // the value is null
}))

webpack file of mfe1

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",
}

webpack file of mfe2

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',
        },

Need help . Why is the value null??

Syed Shahid S
  • 36
  • 4
  • 1
    The behaviorSubject has a default value, you setting it to null so you'll get null as the first value on the subscription – Matthieu Riegler Jun 13 '23 at 14:22
  • Are you sure that both micro frontends are sharing the same instance of the AnalyticsDataService class? I'm not sure, but I'd imagine they are using two different instances of that service class, which means that the BehaviorSubject of one will not be the same as the subject of the other. – Jake Smith Jun 13 '23 at 21:15
  • This might be helpful to read: https://stackoverflow.com/questions/60548251/how-do-you-share-state-in-a-micro-frontend-scenario Essentially, it may not be a good idea to share data/state between micro frontends (why are they separated if they need to share the same data?). But if you have a valid reason to do this, think of them as separate apps, with their own injectors. – Jake Smith Jun 13 '23 at 21:17
  • Thanks everyone. @JakeSmith both the mfe's share the same instance of the service class. The problem was in importing the service class. in mfe1, service class was imported as import {AnalyticsDataService} from '../../../../shared/services'; in mfe2, service class was imported as import {AnalyticsDataService} from "projects/shared/services"; after changing the path to "../../../../shared/services" in mfe2 i was able to solve the issue. – Syed Shahid S Jun 14 '23 at 10:01

0 Answers0