Example for @angular-architects/module-federation

This examples loads a microfrontend into a shell:

Important Files

Have a particular look at the following files:

• README.md: Shows how to install dependencies and how to start the example
• apps\mfe1\webpack.config.js: Microfrontend config
• apps\shell\webpack.config.js: Shell config
• apps\shell\src\app\app.routes.ts: Lazy route for microfrontend
• apps\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

• Angular Trainings and Workshops
• Angular Consulting