In this post, I’ll present a nuget package that I’ve created as a prototype to try to solve this problem, exposing Blazor components with module federation for other applications to consume.
What is Module Federation?
What is Microfrontend architecture?
Microfrontend architecture is similar to the microservices architecture, but applied to frontend applications. An application developed using microfrontend architecture is composed of one or more microfrontends, components that are self contained, individually deployed and that can be developed in different technologies from each other.
In the image below, we can see an application with four microfrontends. Each one is developed by a different team and in a different technology.
More on microfrontends in this Martin Fowler’s post.
Angular Module Federation wrapper for Blazor
Disclaimer: This package is a prototype and not ready for production.
After installing Angular Module Federation wrapper for Blazor nuget package, it will generate an Angular application at compile time, exposing the registered Blazor components through module federation.
The exposed components accept input parameters and subscription to events.
First, install the
Blazor.ModuleFederation.Angular Nuget package:
The source code for the Angular application is generated by an MSBuild task. For this, we need to configure which component will be exposed.
.razor file of the component, include the attribute
GenerateModuleFederationComponent at the top.
Program.cs file, register the component with the
.csproj file, configure the following parameters:
- ModuleFederationName: Name of the module that will be exposed;
- MicroFrontendBaseUrl: The URL where the Blazor application will be published to;
- BuildModuleFederationScript: Enable or disable the Angular module federation wrapper generation;
- IsProduction: If the Angular app will be compiled with production configuration;
Create a loader component to load the remote Blazor component. Don’t forget to include it in the app module.
Include the loader component in the HTML.
Import the Blazor exposed component in the
Current issues and limitations
- Only works with Blazor WebAssembly;
- Only one Blazor app can be loaded by a host (the app may expose several components);
- Blazor App server needs to have CORS enabled.