How to do data communication using shared service with module federation plugin in angular micro-frontend?

Question

I'm facing a challenge in my Angular project where I have a base app running on port 4500, and I've imported a remote app. In the remote app, I've created a shared service using a Subject and have configured it in webpack.config.js. However, I'm not receiving the data in the base app that I subscribe to from the remote app.

The expected behavior is that any username entered in the remote app should be reflected in the base app. Here are the relevant parts of my code:

Host App Code (app.component.ts):

dataReceived: any;

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

Remote App Code (shared.service.ts):

subject$ = new Subject<string>();

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

Remote App Code (remote.component.ts):

nameOfUser: any = 'Mark Doe';

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

Remote App HTML (remote.component.html):

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

I'm not sure why the data isn't being received in the base app as expected. Any insights or help would be greatly appreciated.

Added screenshot for more references