Transforming Your Application into Micro Frontends with Native Federation for Angular— Part 1

Learn how to start structuring your application to work with MFE using Native Federation for Angular

Angular with Native Federation

Important: This article is dedicated to showing how to implement Native Federation with Angular using only standalone components.

Introduction

Micro Frontends (MFE) is a modern approach to developing web applications where the frontend is divided into smaller, independent modules that can be developed, deployed, and updated separately. This helps improve the scalability and maintainability of the project. In this article, we will explore how to implement MFE using Native Federation for Angular.

What is Native Federation?

Native Federation is an advanced micro-frontend solution for Angular applications, enabling seamless integration and independent deployment of multiple frontend modules within a single application. It leverages the power of Module Federation, introduced in Webpack 5, to allow different teams to develop, deploy, and update parts of the application independently without interfering with each other. This approach significantly enhances scalability, maintainability, and the overall modularity of large-scale applications, making it easier to manage and evolve complex frontend architectures.

Project Structure

We will create a project with a Host and two Micro Frontends (MFEs):

• Shell: The main application that loads the Micro Frontends.
• MFE1: The first Micro Frontend.
• MFE2: The second Micro Frontend.

Initial Setup

First, create three new Angular projects using the Angular CLI, and add the @angular-architects/native-federation dependency:

ng new shell --routing --style=scss
ng new mfe1 --routing --style=scss
ng new mfe2 --routing --style=scss

cd shell
ng add @angular-architects/native-federation
cd ../mfe1
ng add @angular-architects/native-federation
cd ../mfe2
ng add @angular-architects/native-federation

Configuring Module Federation

Shell

The commands above will generate the entire structure we will need to work. In the shell, the commands will generate a file called federation.config.js. For the shell, we can remove the exposes block, leaving it like this:

const { withNativeFederation, shareAll } = require('@angular-architects/native-federation/config');

module.exports = withNativeFederation({
  name: 'shell',
  shared: {
    ...shareAll({ singleton: true, strictVersion: true, requiredVersion: 'auto' }),
  },
  skip: [
    'rxjs/ajax',
    'rxjs/fetch',
    'rxjs/testing',
    'rxjs/webSocket',
  ]
});

Create the assets folder in the following directory: src/assets

Modify angular.json to recognize the assets folder:

"architect": {
  "build": {
    "esbuild": {
      "options": {
        "assets": [
         {
          "glob": "**/*",
          "input": "public"
         },
         "src/assets"
        ],
      },
    }
  },
}

Create the federation.manifest.json file inside the assets folder (src/assets/federation.manifest.json), and then add the MFEs inside it:

{
  "mfe1": "http://localhost:4201/remoteEntry.json",
  "mfe2": "http://localhost:4202/remoteEntry.json"
}

Edit the main.ts file to include the federation.manifest.json loading:

import { initFederation } from '@angular-architects/native-federation';

initFederation('/assets/federation.manifest.json')
  .catch((err) => console.error(err))
  .then((_) => import('./bootstrap'))
  .catch((err) => console.error(err));

Finally, include your MFEs routes within app.routes.ts:

import { loadRemoteModule } from '@angular-architects/native-federation';
import { Routes } from '@angular/router';

export const routes: Routes = [
  {
    path: 'mfe1',
    loadComponent: () => loadRemoteModule('mfe1', './Component').then((m) => m.AppComponent),
  },
  {
    path: 'mfe2',
    loadComponent: () => loadRemoteModule('mfe2', './Component').then((m) => m.AppComponent),
  },
];

MFE

For each MFE perform the steps below

Change the default port:

"architect": {
  "serve-original": {
    "options": {
      "port": 4201
    }
  },
}

Start the MFE:

cd mfe1
npm start

With this, our MFEs will already be running independently.

Testing shell integration

Go back to the shell and, with the MFE running, start the shell. With this, our shell will be running independently:

shell running

When we access /mfe1 or /mfe2, we will be able to see the MFE being loaded:

shell loading mfe

For a practical demonstration and to follow along with the implementation details, you can check out the complete source code on GitHub. The repository includes all the necessary configurations and code examples to help you set up and run the project seamlessly. Visit the repository here.

Conclusion

Implementing Micro Frontends with Module Federation in Angular allows you to develop modular applications, making maintenance and scalability easier. In this article, we configured a Host and two Micro Frontends successfully. This approach can be expanded to larger and more complex projects, bringing numerous benefits to the management and evolution of your web applications.

Next Step

In this article, we successfully implemented the initial setup by loading the entire AppComponent from the MFE. In the next article, I will demonstrate how to transform your MFE into an independent application by working with routes within the MFE itself. Stay tuned for more detailed guidance on enhancing your micro-frontend architecture. You can access part two here.

Follow me on LinkedIn: https://www.linkedin.com/in/erickzanetti