Micro-Frontend Multirepo Module Federation

Module Federation

Multirepo Micro-Frontend Implementation using Module Federation.

Tools

• Angular-Architects/Module-Fedration

• Angular-Architects/Module-Fedration-Tools

  Global State Management

• Redux-Micro-Frontend

Getting Started

Angular Version 15.1.0

Module Federation includes, currently three projects:

1. Shell, the main project.
2. ProjectOne, the first microfrontend subProject.
3. ProjectTwo, the second microfrontend subProject.

In every app you should run:

npm install

Firstly, you should run Shell with this command (port 4200):

ng serve

Secondly, you should run ProjectOne with this command (port 4201):

ng serve

And Also, you should run ProjectTwo with this command (port 4202):

ng serve

Description

ProjectOne exposes to Shell Dashboard Module which includes a table. Shell can access Dashboard Module via routing.

ProjectTwo exposes to Shell and particularly into Shell's Form Component Form Component which includes a form.

By entering data in form and clicking submit, the submited data stored in Global State. Then we can retrieve these data inside DashboardModule with Global State and show them inside the table.