How To Build Micro Frontend With Micro Federation in Angular?

Micro Frontends are a way to build and deliver a large application as a composition of small, independent applications. This approach enables teams to work on their own codebases and deliver new features faster, while also making it easier to scale development.

Module Federation is a way to implement Micro Frontends in the Angular ecosystem. It allows multiple Angular applications to share a common set of libraries and enables them to communicate with each other using a shared API.

What is micro frontends?

Micro Frontends are a way to build a deliver a large application as a composition of small, independent applicaiton. This approach enables teams to work on their own codebases and deliver new features faster, while also making it easier to scale development.

What is module federation?

Module Federation is a way to implement Micro Frontends in the Angular ecosystem. It allows multiple Angular application to share a common set of libraries and enables them to communicate with each other using a shared API.

Benefits of Building Micro Frontend with Module Federation

The benefits of this include:

1. Improved scalability: By breaking the Micro frontend angular application into smaller units, it becomes easier to scale individual parts of the application independently. This can be particularly useful if different parts of the application have different scaling needs.
   
2. Enhanced maintainability: Decomposing the Micro frontend angular application into smaller, self-contained units make it easier to understand and maintain the codebase. This can be especially useful in large organizations where multiple teams are working on the same codebase.
   
3. Faster deployment: Because microfrontends and module federation allows for independent deployment of different parts of the frontend application, it becomes possible to deploy changes to production more quickly.
   
4. Improved code reuse: Decomposing the frontend application into smaller units makes it easier to reuse code across different parts of the application.
   
5. Better team autonomy: By allowing teams to work on self-contained units of the frontend application, microfrontends and module federation can improve team autonomy and reduce dependencies between teams.

Also Check:- What is Standaone Components and How to Use in Angular?

Steps to Create Micro Frontend

Let's get started and create a small microfrontend.

Before starting please make sure you have the following prerequisites

• Have some basic knowledge of Angular and Angular CLI.
• A system with NodeJs and Angular CLI already installed
• Angular and Angular CLI needs to be atleast 14 or higher
  

Angular's Module Federation team has conveniently provided a starter kit for this. So let's first clone their repo and download the dependencies with the following commands

git clone https://github.com/manfredsteyer/module-federation-plugin-example.git --branch starter
cd module-federation-plugin-example
npm i

In the project, if you have already noticed there are 2 folders in the project folder. One is shell and the other is mfe1. In this example, the 'shell' will be the host while mfe1 will be the microfrontend

Inside mfe1 there is a flights module at projects/mfe1/src/app/flights that we will be going to load through the shell. You can individually serve them using ng serve shell -o and ng serve mfe1 -o to serve the application individually.

Now, let's activate and configure module federation:

Install @angular-architects/module-federation into them:

ng add @angular-architects/module-federation --project shell --type host --port 4200
ng add @angular-architects/module-federation --project mfe1 --type remote --port 4201

This activates module federation, assigns a port for ng serve and generates the skeleton of a module federation configuration.

Now, let's start configuring the microfrontend. Open the file projects\mfe1\webpack.config.js. This is where it is defined what you are exposing to the host.
By default, you will be exposing the app.component.ts file. Instead, let's expose the Flights module. So replace the entire exposes object with

exposes: {
	'./Module': './projects/mfe1/src/app/flights/flights.module.ts',
},

This is basically saying to expose the flights module to any hosts that use mfe1.

Similarly, if you open the shell’s config file ‘projects\shell\webpack.config.js’ you will notice instead of exposes there is a remotes object. This basically says to the Host that there is a remote mfe1 which can be referenced in its router.

Make sure that mfe1’s port is 4201 instead of 4200

remotes: {
	mfe1: 'http://localhost:4201/remoteEntry.js',
},

This references the separately compiled and deployed mfe1 project.

Now let's load reference the microfrontend in the shell’s router. Open projects\shell\src\app\app.routes.ts and add a route to the Micro Frontend

{
	path: 'flights',
	loadChildren: () => import('mfe1/Module').then(m => m.FlightsModule)
},

Please note that the imported URL consists of the names defined in the configuration files above. So depending on what you assign in expose object the import URL changes import('mfe1/Module').
You will notice a red squiggly line under 'mfe1/Module'. That is because the URL does not exist at the time of compilation. So to stop the Typescript compiler from complaining about it declare the module in the projects\shell\src\decl.d.ts file.

declare module 'mfe1/Module';

Now everything is configured so now it's time to try it out. Serve both the shell and mfe1 in separate terminals

ng serve shell -o
ng serve mfe1 -o

After a browser window with shell opened (http://localhost:4200), click on Flights. This should load the Micro Frontend into the shell.
Also, ensure that the Micro Frontend also runs in standalone mode at http://localhost:4201.

Congratulations! You've implemented your first Module Federation project with Angular!

Now time for some tips and tricks
You can dynamically load remotes directly in app.routes.ts rather than in the webpack.config.js
So first, comment the remote mfe1 property in projects\shell\webpack.config.js.

remotes: {
// Comment this line:
// "mfe1": "http://localhost:4201/remoteEntry.js",
},

Then in the app.routes.ts use the function loadRemoteModule instead of the dynamic import statement:

import { loadRemoteModule } from '@angular-architects/module-federation';
const routes: Routes = [
	[...]
	{
		path: 'flights',
		loadChildren: () =>
			loadRemoteModule({
				type: 'module',
				remoteEntry: 'http://localhost:4201/remoteEntry.js',
				exposedModule: './Module'
		}).then(m => m.FlightsModule)
	},
	[...]
]

Restart both, the shell and the micro frontend (mfe1).

The shell should still be able to load the microfrontend. However, now it's loaded dynamically.

Conclusion

Micro frontend architecture angular are not for every application as it requires considerable time and effort not just to create and introduce it into your codebase but also to maintain it. It gets a bit more complicated when you want to have shared states and bidirectional data passing.

In most small to medium size projects, the benefits do not outweigh the cost, but in most large-scale projects where you want to have independent teams managing parts of the project, it is highly recommended to implement Module Federation. This situation may change in the future as the Angular Module Federation team is working hard to make it much more accessible and easy to use.

If you are looking to develope a application in angular, we at thirdrocktechkno can help you application which will help you grow your business. With decade of experience in custom software development, will make sure that we will develope a custom made solution custom made to your need. Contact us today!

Additional Resources

More examples for Module Federation
https://github.com/module-federation/module-federation-examples
More Advance Features
https://github.com/angular-architects/module-federation-plugin/blob/main/libs/mf/README.md#example-️

FAQs

1. What are Micro Frontends?
   
   Micro Frontends are a way to build large application by composing them from small, independent applications. This allows teams to work on separate codebases, deliver features faster, and scale development more easily.
   
2. What are Module Federation in Angular?
   
   Module Federatoin is a technique used to implement Micro Frontends within Angular ecosystem. It enables multiple Angular application to share libraries and communicate with each other through a shared API.
   
3. What is the process for creating a Micro Frontend in Angular?
   
   * Clone the starter kit provided by Angular's Module Federation team.
   
   * Set up the 'shell' (host) and 'mfe1'(Micro Frontend)
   
   * Serve the application individually.
   
   * Configure Module Federation by installing the necessary package and editing the configuration file to expose moudles like the Flights modules.
   
4. Are Micro Frontends suitable for all application?
   
   Micro Frontends may not be ideal for small to medium-sized projects due to the complexity and maintenance effor involved. However, they are highly recommended for large-scale projects where independent teams manage different parts of the applicaiton.