This guide will help you create a simple angular application that is able to include modules from other angular application aka microfrontends and use them our sample angular application
Brief intro on microfrontends and why they are popular?
Microfrontends enable the developers to club together multiple small applications into a single application as opposed to the earlier monolith design. Basically if you want to create an application to book tickets for travel, movies, events etc. for the end user it will be a single application on a single domain but from development perspective dedicated teams will work on each aspect.
So we will have one team working on movie booking in separate repo and their application can run individually. Similarly there will be teams working on separate application for events & travel respectively.
This has an advantage since we have loose coupling and each sub application can be developed and maintained separately. Changes to one part of code in one application will not cause bugs in another application. We also have some cons but considering the tradeoff, depending on your use-case microfrontends are a powerful tool.
Let’s dive into how we can implement it through module federation in Angular 12
Project Structure & Demo
We have 1 shell application and 2 remote applications (microfrontends). On Clicking each link we load a module from the remote application and use it in our shell application. As far as angular is concerned, this is just another lazy loaded module.
In our scenario the 3 applications are running on different ports on localhost.
When we click on the links, modules from remote applications are loaded like a lazy loaded module and we can see the result in the router outlet
This has simple html but it can be a module with complex routes, many components etc. Let’s go into the code now.
Implementing Module Federation with Angular 12
To use module federation we need to run below command in all the related applications.
ng add @angular-architects/module-federation --project remote1 --port 7000
Points to note -
- remote1 is the name of the project (which you used when creating the application with ng new command)
- port can be anything, just make sure it free
- The above command does few changes under the hood and adds a webpack.config file for configurations related to module federation. This is in addition to the angular configurations.
- Run this command in the shell, remote, remote1 application with correct project name and unique port
Configure webpack file
The package we added gives us a skeleton webpack.config file. We need to give details in the remote config files which can be accessed by the config file of the shell. (Note: for webpack.config changes to reflect, restart angular application)
There are multiple things we can do here like giving shared modules so that we don’t have duplicates and version mismatch etc. But the main part is providing a name, filename & exposing the module with a key. The mapping is done by the filename, in this case remoteEntry.js which is a small file that gets created during runtime.
In Shell application we define the keys with which to access the remoteEntry files so that angular will know from where to lazy load the module.
Now we need to load the modules on route change. Here to get the module we use a helper method from the package we added earlier called loadRemoteModule where we pass the proper remoteName, remoteEntry & exposedModule which we used in the webpack.config.js file of remote applications.
Link to Code on github below
GitHub - Hulk914/angular-module-federation: Sample application to demonstrate module federation
Sample application to demonstrate module federation - GitHub - Hulk914/angular-module-federation: Sample application to…
That’s is it. On a basic level this is how you can achieve microfrontend architecture with the help of module federation in angular 12. There are lots of good articles available online in case you want to deep dive into the topic. Happy Learning.