In this digital time, the form of a web application is getting larger and more sophisticated, so frequently they need to be handled by multiple teams. Your web application might have features developed by different teams and sometimes it’s better to release only certain features into production before delivering the entire web application.

Most of these sophisticated apps live on the client side which makes it harder to maintain. With a monolithic big web application, there are some other issues as well. However, as applications get more complex over time, requiring on-the-fly scalability and high responsiveness, a micro-frontend design based on Angular components is becoming increasingly effective in addressing these requirements.

Micro Frontend is a concept that considers a website or web application as a collection of features controlled by separate teams. Each team is dedicated to and specialized in a specific area of business or purpose. Such a cross-functional team creates functionality from top to bottom, from server to user interface.

Benefits of Micro Frontend Architecture

Automation of CI/CD pipeline: Since each app integrates and deploys independently, it simplifies the CI/CD pipeline. Because all functionalities are separate, you don’t have to worry about the entire program while introducing a new feature. If there is a little error with the code in a module, the CI/CD pipeline will break the entire build process.

Team flexibility: Numerous teams can add value to multiple systems while working separately.

Single responsibility: Such an approach enables each team to build components with a single responsibility. Each Micro Frontend team focus 100% on the functionality of their Micro Frontend.

Reusability: You will be able to use code in multiple places. One created and delivered module can be reused by multiple teams.

Technology agnosticism: Micro Frontend architecture is independent of technology. You can use components from different web development frameworks (React, Vue, Angular, etc.).

Simple learning: Smaller modules are easier to learn and understand for new developers entering the teams, than a monolithic architecture with a huge code structure.

Getting started

We have a micro frontend architecture displayed in the picture below:

Now we need to create webpack.config.js and webpack.prod.config.js files at the root of our app.

Copy to Clipboard

Module federation allows us to share common npm packages between different frontends, so it will reduce payload for lazy-loaded chanks. We can set up the minimum required version, is allowed two or more versions for one package, etc. More details about possible plugin options are here.

Please note: We have an exposed section, so here we can define which items we need to allow to export from our micro-frontend app. In our case, we export only 2 components.

After that we need to add a custom config file into angular.json and change the default builder to ngx-build-plus:

Register page Module federation

This web application will contain all logic for the login/register page.

The main flow is almost the same, we need to create a new app and install a custom builder for using custom webpack configs.

After that, we need to create webpack.config.js and webpack.prod.config.js

As you can see, here we export only RegisterPageModule. This module we can use like a lazy-loaded module in our shell app.

Also, we need to change the default builder to ngx-build-plus and add webpack configs into the angular JSON file (the same as we did for the Header & Footer module before).

Dashboard Module Federation

This module presents some data for an authorized user. The same approach as for Register page, but with personal webpack configs:

Shell app Module Federation

Main app that loads all separated micro frontend modules into one app. Like before, we create a new app with a custom angular builder:

Add custom webpack configs:

But before we need to set up webpack config with the custom builder into angular.json file.

In environment/environment.ts we declare all module configurations (for the prod version we need to replace localhost address by deployed public address):

Then we need to add a loading Dashboard and register page where it is required. First of all, we need to create utils for module federation, where we can load remote modules from other apps.

And utils for building lazy loaded routes:

Then we need to define a micro frontend service:

And file for type:

Then we need to declare remote modules according to the routes:

And use our Micro Frontend Service in the main app module:

Now we need to load our Footer and Header components. For that we need to update the app component:

and file  src/app/app.component.ts will look like this:

Here we have logic for loaders and logic for lazy-loaded components (Header, Footer).

Communication Between Micro Frontends

We have few ways to share data between different micro frontends. More details are described here.

In our case, we have decided to use Custom Event for communication. Custom Event allows us to send custom data via Event payload.

One module should dispatch custom events like this:

Other modules can subscribe to this event:

Demo preview

For unauthorized users:

 

For authorized users: