Module Federation Angular 12 — Beginners Guide with example

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

Photo by Glen Carrie on Unsplash

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.

3 different angular applications
Shell/main application running on port 5000

In our scenario the 3 applications are running on different ports on localhost.

remote application running on port 3000
remote1 application running on port 7000

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

On Clicking MicroFrontend, we go to /remote and load remote application
On Clicking MicroFrontend1, we go to /remote1 and load remote1 application

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

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)

webpack.config.js of remote 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.

shell/container application webpack.config.js

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.

shell application routing 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

Conclusion

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.

Developer, Musician, Biker, Coder & Travel enthusiast