We can't find the internet
Attempting to reconnect
Something went wrong!
Hang in there while we get back on track
Angular based Micro frontends with module federation | Manfred Steyer | ng-conf 2022
Discover how to build scalable and maintainable web applications with Angular-based micro frontends using module federation, a powerful solution for lazy loading multiple frameworks and versions.
- Angular’s lazy loading is just a hint for the browser to load the script at runtime
- Micro frontends are not popular among customers, who are interested in a single application
- Module federation is a solution for lazy loading multiple frameworks and versions
- The shell and micro frontends can be in different versions and frameworks, but still work together
- Micro frontends can be separately compiled and deployed, and loaded into the shell at runtime
- Static federation is possible with module federation, where metadata is written to a file
- Dynamic federation uses a wrapper component to load a web component from another framework
- Module federation can be used with CLI and is shipped with Angular
- Some challenges when implementing module federation include resolving differences in frameworks and versions
- The good thing is that it allows for highly dynamic integration of micro frontends into the shell
- Module federation allows for sharing of libraries and data, which can be opt-in
- It’s important to abstract differences in frameworks away, and use Webpack underneath to do this
- Scoping and naming are important for module federation, with names being set in the shell and read in the micro frontends