Angular, Webpack5 Module Federation: Not sharing libraries rxjs

Question

Everything working under NX If I update a observable in mfe(remote), it is working in the scope of this mfe but not in the shell. the reverse happens the same way, in the shell components it works but the value updates are not visible in the remotes. Of course they all access the same library and same service.

I have seen other posts here with problems with shared in module.exports and with rxjs, but none where everything seems to be set up correctly.

Service

  private _loginTest = new BehaviorSubject<string>('test');
  loginTest$ = this._loginTest.asObservable();
  sendMsg(message: string) {
    this._loginTest.next(message);
  }

Component.ts in shell, same in component.ts remote

  ngOnInit() {
    this.storageService.loginTest$.subscribe(
    (message) =>{
      this.value = message;
    }
    );
  }
...
  successMsg() {
    this.storageService.sendMsg('test string ' + this.count++);
  }

Update button in both, shell and remote

      <button
        mat-raised-button
        color="primary"
        (click)="successMsg()"
        >
        Success Message
      </button>

configuration of webpack

webpack.config.js

First try

      shared: share({
        '@enosys/auth': { singleton: true, strictVersion: true, requiredVersion: 'auto', includeSecondaries: true },
        '@angular/core': { singleton: true, strictVersion: true, requiredVersion: 'auto', includeSecondaries: true },
        '@angular/common': { singleton: true, strictVersion: true, requiredVersion: 'auto', includeSecondaries: true },
        '@angular/common/http': { singleton: true, strictVersion: true, requiredVersion: 'auto', includeSecondaries: true },
        '@angular/router': { singleton: true, strictVersion: true, requiredVersion: 'auto', includeSecondaries: true, },
        '@angular/cdk': { singleton: true, strictVersion: true, requiredVersion: 'auto' },
        '@angular/material': { singleton: true, strictVersion: true, requiredVersion: 'auto', includeSecondaries: true },
        '@angular/forms': { singleton: true, strictVersion: true, requiredVersion: 'auto' },
        'rxjs': { singleton: true, strictVersion: true, requiredVersion: 'auto', includeSecondaries: true },
        'rxjs/operators': { singleton: true, strictVersion: true, requiredVersion: '~7.8.0', includeSecondaries: true },
        '@libs/storage-client': { singleton: true },
        ...sharedMappings.getDescriptors(),
      }),

Second try

      shared: {
        ...shareAll({ singleton: true, strictVersion: true, requiredVersion: 'auto' }),
      },

Despite being the same service in the same library in both cases, the subcriptions work, but independently from each other.

Any Idea?

The functionality I would expect is that regardless of where the value is changed, the has the same value on all micro frontends and in the shell.

Everything else works correctly, with no other problems with Module Federation.

Answer 1

Well, as unfortunately happens all too often, in the end the problem was an oversight. Wrong path in two variables in webpack.config.js tsConfigPath and workspaceRootPath

In shell and in the remotes have been a level to high

const tsConfigPath =
  process.env.NX_TSCONFIG_PATH ??
  path.join(__dirname, '../../../tsconfig.base.json');

const workspaceRootPath = path.join(__dirname, '../../../');