Repository files navigation

This examples loads a microfrontend into a shell:

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

• Install packages:yarn (!)*
• Start Micro Frontend (remote):ng serve mfe1 -o
• Start Shell (host):ng serve shell -o
• Make suremfe1 is started beforeshell is loaded into the browser
• Use the hyperlinkflights in theshell to loadmfe1

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

Have a look at thisarticle series about Module Federation

• Angular Trainings and Workshops
• Angular Consulting