In today’s fast-paced software development landscape, building large applications can become complex and unwieldy. To tackle this complexity, teams are increasingly adopting the Micro Frontends architecture. This approach breaks down a web application into smaller, manageable pieces — or "micro frontends" — that can be developed, tested, and deployed independently. In this post, we will explore how to implement Micro Frontends using Angular, examining the benefits, challenges, and practical examples.

What are Micro Frontends?

Micro Frontends extend the concept of microservices to the front end. The idea is to decompose a monolithic front-end application into smaller, focused pieces. Each team can then own a specific part of the application, making it easier to develop and scale as needed.

In simple terms, if your application is a pizza, Micro Frontends allow you to serve various toppings independently. Each "topping," in this case, represents a feature or module of your application, which can be developed by different teams using Angular or other frameworks.

Key Benefits of Micro Frontends:

1. Independent Deployments: Each micro frontend can be deployed independently without affecting the whole application.

2. Scalability: Teams can scale their respective modules without impacting others, leading to faster development cycles.

3. Technology Agnostic: Micro Frontends can be developed using different technologies, allowing teams to choose the best tools for their needs.

4. Improved Maintainability: Smaller, focused codebases are easier to maintain and refactor.

5. Team Autonomy: Teams can operate independently, leading to increased productivity and ownership of their modules.

Setting Up Angular for Micro Frontends

To demonstrate how to implement Micro Frontends in Angular, we can use a combination of Angular CLI, webpack Module Federation, and some routing configurations.

Here's a step-by-step guide on how to structure and implement Micro Frontends with Angular:

1. Create Your Base Application

First, you need to set up your base application. This will act as a container for your micro frontends. Use Angular CLI to generate a new project:

ng new main-app
cd main-app

2. Add Module Federation Support

Module Federation is a feature of webpack that allows you to load code from another webpack build at runtime. Here’s how to set it up:

• Install the required dependencies:

npm install @angular-builders/custom-webpack webpack webpack-cli --save-dev

• Modify your angular.json to use the custom webpack builder:

"architect": {
  "build": {
    "builder": "@angular-builders/custom-webpack:browser",
    "options": {
      "customWebpackConfig": {
        "path": "./extra-webpack.config.js"
      },
      ...
    }
  }
}

• Create an extra-webpack.config.js file in your root directory:

const ModuleFederationPlugin = require("webpack").container.ModuleFederationPlugin;

module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      name: "main_app",
      remotes: {
        userModule: "userModule@http://localhost:4201/remoteEntry.js",
      },
    }),
  ],
};

3. Create Your Micro Frontend

Now create a new Angular application that will serve as a micro frontend.

ng new user-module --routing
cd user-module

Add Module Federation as you did for the base application and configure the extra-webpack.config.js:

new ModuleFederationPlugin({
  name: "userModule",
  filename: "remoteEntry.js",
  exposes: {
    './UserComponent': './src/app/user/user.component.ts',
  },
}),

Create a simple component (UserComponent) and add routing in app-routing.module.ts.

const routes: Routes = [
  { path: '', component: UserComponent }
];

4. Integrate Micro Frontend into the Base Application

Return to your main application and modify the app routing to lazy-load your micro frontend:

const routes: Routes = [
  {
    path: 'users',
    loadChildren: () =>
      import('userModule/UserComponent').then((m) => m.UserComponent),
  },
];

5. Serving the Applications

Make sure both applications (main-app and user-module) are running concurrently. You can use ng serve for each application from different terminals. When you navigate to /users in the base application, the UserComponent from the user module should seamlessly load.

Challenges

While Micro Frontends offer numerous advantages, they also come with challenges:

• Communication Between Micro Frontends: Managing shared state and interactions between micro frontends can introduce complexity.

• Performance Overhead: Each micro frontend brings its own dependencies; careful optimization is needed to avoid bloated application sizes.

• Routing Complexity: Coordinating routing between multiple micro frontends demands a well-planned router structure.

Conclusion

Micro Frontends provide an innovative approach to building scalable and maintainable applications using Angular. While there are challenges to navigate, the benefits of independent deployments, improved scalability, and team autonomy can vastly outweigh the drawbacks. By leveraging modern tools like webpack Module Federation alongside Angular’s powerful features, teams can craft applications that are both agile and robust. As this architectural style gains traction, mastering it could be key to unleashing the full potential of your development workflow.