Angular Micro Frontends with Module Federation

Structure of the project:

• shell - main application (host)

• mfe1 - it's first micro frontend (remote). It has 2 pages which are accessible by any user:

  • /public/about
  • /public/login

• mfe2 - second micro frontend (remote). It has 3 pages which are accessible only by authenticated users:

  • /secure/profile - page with authenticated user info
  • /secure/page1
  • /secure/page2

• auth - shared library, to be used by all apps

For example: http://localhost:4200/public/about - will open the About page from mfe1, available for all users. http://localhost:4200/secure/profile - will open the Profile page from mfe2, available only for authenticated users. Any route under path /secure is protected by Angular Guard.

Installation of the project

Angular CLI is required to be installed globally. If it's not installed, run the following command: npm install -g @angular/cli or brew install angular-cli (for MacOS users)

After that, run the following command to install all dependencies: npm install

How to configure micro frontends

• Each micro frontend has a configuration file federation.config.js which is used to configure the module federation plugin. For ex. sharing/exposing modules between micro frontends.
• To configure "remote" domains change shell/src/assets/federation.manifest.json.

How to start the project

Use single command to start all apps: npm start:all After that, open the browser and navigate to http://localhost:4200

Alternatively you can start each app separately within it own terminal:

Start the Micro Frontend 1: ng serve mfe1

Start the Micro Frontend 2: ng serve mfe2

Wait until the Micro Frontend is started.

Open another console and start the shell:

ng serve shell -o

To add a new micro frontend use:

ng add @angular-architects/native-federation:init --project {projectName} --port {port} --type remote

1. Change the {projectName} and {port} to your needs.
2. Open projects/shell/src/assets/federation.manifest.json and add the new micro frontend to the list.

How to build project

From root folder use next commands to build the project:

Single command to build all apps at once: npm run build:all

Separate build commands:

Build mfe1: ng build mfe1

Build mfe2: ng build mfe2

Build shell: ng build shell

After build is done, check folder /dist for each app.

Deployment

Don't forget to build the project before deploying it. Use the build commands from the previous section. Also, change projects/shell/src/assets/federation.manifest.json to point to the correct domain of the micro frontends.