如何在 Angular 微前端中使用共享服务与模块联合插件进行数据通信？

Question

我在 Angular 项目中面临挑战，其中我有一个在端口 4500 上运行的基本应用程序，并且我导入了一个远程应用程序。在远程应用程序中，我使用主题创建了一个共享服务，并在 webpack.config.js 中对其进行了配置。但是，我没有收到从远程应用程序订阅的基本应用程序中的数据。

预期的行为是在远程应用程序中输入的任何用户名都应反映在基本应用程序中。以下是我的代码的相关部分：

主机应用程序代码（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>

我不确定为什么基本应用程序没有按预期接收数据。任何见解或帮助将不胜感激。

添加了屏幕截图以供更多参考

Answer 1

为了在 Angular 微前端中使用共享服务与模块联合插件来促进数据通信，请考虑以下步骤：

创建共享服务：

在 Angular 应用程序中开发一个服务，封装您想要在微前端之间通信的共享功能或数据。该服务应该是可注入的，并提供数据交换的方法或属性。 与模块联盟的导出服务：

在模块联合配置中，确保共享服务可供其他微前端使用。这涉及到在 webpack 模块联合插件中设置适当的配置。 处理服务生命周期：

注意服务生命周期，特别是当您遇到微前端可能动态加载和卸载的场景时。考虑适当地处理服务实例化和销毁。 通过执行以下步骤，您可以使用共享服务与 Angular 微前端中的模块联合插件建立数据通信。这种方法可以在独立的 Angular 应用程序之间共享功能和数据，从而形成模块化和可扩展的架构。