Repository files navigation

Multirepo Micro-Frontend Implementation usingModule Federation.

• Angular-Architects/Module-Fedration

• Angular-Architects/Module-Fedration-Tools

  Global State Management

• Redux-Micro-Frontend

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 runShell with this command (port 4200):

ng serve

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

ng serve

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

ng serve

ProjectOne exposes toShellDashboard Module which includes a table.Shell can accessDashboard Module via routing.

ProjectTwo exposes toShell and particularly intoShell's Form ComponentForm Component which includes a form.

By entering data in form and clicking submit, the submited data stored inGlobal State. Then we can retrieve these data insideDashboardModule withGlobal State and show them inside the table.