Morioh
Login
Urban Cummerata

Urban Cummerata

3 years ago

In my previous article, I’ve shown how to use Module Federation which will be part of webpack 5 to implement microfrontends. This article brings Angular into play and shows how to create an Angular-based microfrontend shell using the router to lazy load the separately compiled, and deployed microfrontends.

Besides using Angular, the result looks similar as in the previous article:

Shell

The loaded microfrontend is shown within the red dashed border. Also, the microfrontend can be used without the shell:

Microfrontend without Shell

The source code of the used example can be found in my GitHub account.

#unkategorisiert #angular #module federation #microfrontends #github

The Microfrontend Revolution - Part 2: Module Federation with Angular

angulararchitects.io

The Microfrontend Revolution - Part 2: Module Federation with Angular

This article is part of a series: Part 1: Module Federation in Webpack 5 Part 2: Module Federation with Angular Part 3: Dynamic Module Federation with Angular (this one) Part 4: Building A Plugin-based Workflow Designer With Angular and Module Federation Big thanks to Zack Jackson, the mastermind behind Module Federation, who helped me bypassing some pitfalls. In my previous article, I've shown how to use Module Federation which will be part of webpack 5 to implement microfrontends. This article brings Angular into play and shows how to create an Angular-based microfrontend shell using the router to lazy load the separately compiled, and deployed microfrontends. With Module Federation we can use Angular and its router to lazy load separately compiled and deployed microfrontends.

11.05 GEEK