How to Implement Microfrontend Architecture in Angular

In modern web development, the trend towards building large-scale applications has increased significantly. This has led to the emergence of the Microfrontend architecture, which helps manage and scale frontend projects effectively. In this blog, we'll explore what Microfrontend architecture is, why it's beneficial, and how you can implement it in an Angular application.

What is Microfrontend Architecture?
Microfrontend architecture is an architectural style where a web application is divided into multiple smaller, self-contained, and independently deployable frontend applications. Each frontend application (or microfrontend) is responsible for a specific part of the overall functionality. They can be developed, tested, and deployed independently while still working seamlessly together in a single unified user interface.

Benefits of Microfrontend Architecture

1. Scalability: Each team can work on different parts of the frontend without causing conflicts. This allows scaling both the team and the application efficiently.
2. Independent Deployments: Changes to a specific microfrontend can be deployed independently, without needing to redeploy the entire application.
3. Technology Agnostic: Different microfrontends can use different technologies. For example, one part of the application could be in Angular, while another could be in React.
4. Improved Maintainability: Smaller codebases are easier to maintain and refactor, improving the overall health of the project.

Implementing Microfrontend Architecture in Angular
To implement Microfrontend architecture in Angular, we will use Webpack Module Federation. Webpack Module Federation allows you to share and load code between different Angular applications (or any JavaScript applications), making it easier to split your application into microfrontends.

Let's go through the steps to set up a simple microfrontend architecture using Angular.

1. Prerequisites
2. 1. Node.js and npm installed
3. 2. Angular CLI installed
4. 3. Basic understanding of Angular and Webpack

Setting Up the Project
We'll create two Angular applications: a host (container) application and a remote (microfrontend) application.

Step 1: Create the Host Application

ng new host-app --routing --style=scss
cd host-app

Step 2: Create the Remote Application

ng new remote-app --routing --style=scss
cd remote-app

Next, create the remote application:

ng new remote-app --routing --style=scss
cd remote-app

1. Configuring Webpack Module Federation To use Webpack Module Federation, we need to modify the Webpack configuration for both applications. We'll use @angular-architects/module-federation to simplify the setup.

Step 1: Install Module Federation Plugin

npm install @angular-architects/module-federation --save-dev

Step 2: Configure the Host Application
In the host-app directory, run the following command to generate the Module Federation configuration:

ng add @angular-architects/module-federation --project host-app

This command will create a webpack.config.js file with the basic configuration. Edit the webpack.config.js file to set up the Module Federation:

const { shareAll, withModuleFederationPlugin } = require('@angular-architects/module-federation/webpack');

module.exports = withModuleFederationPlugin({
    remotes: {
        // This is where the remote app is registered
        "remoteApp": "remoteApp@http://localhost:4201/remoteEntry.js",
    },
    shared: {
        ...shareAll({ singleton: true, strictVersion: true, requiredVersion: 'auto' }),
    },
});

Step 3: Configure the Remote Application
Similarly, in the remote-app directory, run the following command:

ng add @angular-architects/module-federation --project remote-app

Edit the webpack.config.js file generated for the remote application:

const { shareAll, withModuleFederationPlugin } = require('@angular-architects/module-federation/webpack');

module.exports = withModuleFederationPlugin({
    name: 'remoteApp',
    filename: 'remoteEntry.js', // Name of the remote entry file
    exposes: {
        './Component': './src/app/app.component.ts', // Exposing the AppComponent
    },
    shared: {
        ...shareAll({ singleton: true, strictVersion: true, requiredVersion: 'auto' }),
    },
});

1. Updating Angular Module Configuration Step 1: Update the Host Application Routes In the host-app, open app-routing.module.ts and add a route to load the remote component:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  {
    path: 'remote',
    loadChildren: () =>
      import('remoteApp/Component').then((m) => m.AppComponent),
  },
  { path: '', redirectTo: '/remote', pathMatch: 'full' },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
})
export class AppRoutingModule {}

1. Running the Applications

• Start the remote application first to ensure the exposed module is available:

cd remote-app
ng serve --port 4201

Next, start the host application:

cd host-app
ng serve --port 4200

Now, navigate to http://localhost:4200/remote, and you should see the content of the remote application's AppComponent loaded within the host application.