Skip to content

droid42/multi-framework-version

 
 

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

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 70.9%
  • JavaScript 17.7%
  • HTML 11.0%
  • CSS 0.4%