Skip to content

manfredsteyer/module-federation-plugin-example

Repository files navigation

Example for @angular-architects/module-federation

This examples loads a microfrontend into a shell:

Microfrontend Loaded into Shell

Important Files

Have a particular look at the following files:

  • readme.md: Shows how to install dependencies and how to start the example
  • projects\mfe1\webpack.config.js: Microfrontend config
  • projects\shell\webpack.config.js: Shell config
  • projects\shell\src\app\app.routes.ts: Lazy route for microfrontend
  • projects\shell\src\decl.d.ts: Typing for mapped Url pointing to microfrontend

Installation and Usage

  • Install packages: yarn (!)*
  • Start Micro Frontend (remote): ng serve mfe1 -o
  • Start Shell (host): ng serve shell -o
  • Make sure mfe1 is started before shell is loaded into the browser
  • Use the hyperlink flights in the shell to load mfe1

* Please note, you must use yarn during the beta phase of CLI 11 b/c it allows to override dependencies to force the CLI into webpack 5.

More Details on Module Federation

Have a look at this article series about Module Federation

Angular Trainings, Workshops, and Consulting