Unlike other demos in this repo, the focus of this demo is not about exploring an aspect of Webpack Module Federation. Instead, it focuses on showing how you can create an abstraction on top of the browser Custom Events to act as an Event Bus/Aggregator which you can use throughout the app to subscribe to strongly typed events.
Note
The setup of this code demo is the same as the web-components-ng16. For more information, please read the web-components-ng16 README.
- Go to
/code-demos/communication-event-bus-ng16/shell-ng16folder and runnpm i, followed bynpm start. This will start the shell app on http://localhost:4200. - Go to
/code-demos/communication-event-bus-ng16/mfe1-ng16folder and runnpm i, followed bynpm start. This will start the mfe1 app on http://localhost:4201.
The shell will load the Web component from the mfe1 app on page load.
The event bus is implemented by the EventBus class whose purpose is to allow communicating events between the view components in a strongly typed fashion.
The implementation shown in this code demo makes use of RxJS but you could implement something similar without it. The choice to use RxJS is so that when subscribing to events you can have access to all the operators that RxJS offers, which allow you to manipulate, transform, and combine streams of data in a declarative manner. In many cases, RxJS will allow you to easily express complex event subscription conditions that would otherwise be much harder.
The mfe1 app exposes the MyStandaloneComponent as a Web component. This Web component produces a message-sent custom event when the button Send message is clicked.
Use the Go to /my-standalone-component to load the MyStandaloneComponent component and look at the console for the logs produced when you click the Send message button.
Note
Even though the mfe1 app is producing messages to the console when the Send message button is clicked, this does not happen when the mfe1 app is integrated into the shell. This is because the subscription to the button click happens at the app.component.ts and that is not part of the exported webpack module, which is the MyStandaloneComponent Angular standalone component.
The shell loads the Web component from the mfe1 app by using a wrapper Angular component named Mfe1Component. This component also subscribes to the message-sent custom event and republishes it to the Event Bus using the MessageSentEvent class.
From here on now, any part of the shell can subscribe in a strongly typed fashion to the MessageSentEvent through the Event Bus. For an example see the OtherComponent Angular component.
- Event Bus npm package: simple typesafe cross-platform pubsub communication between different single page applications, web components, fragments, or services. Purposefully built for a micro frontend architecture with a distributed responsibility for deployment. Allowing for framework agnostic and safe communication between different implementations and version.