Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
The Microfrontend Revolution Module Federation ...
Search
Manfred Steyer
PRO
December 17, 2020
0
440
The Microfrontend Revolution Module Federation with Angular @AngularKharkiv
Manfred Steyer
PRO
December 17, 2020
Tweet
Share
More Decks by Manfred Steyer
See All by Manfred Steyer
Your Architecture as a Crime SceneForensic Analysis @EntwicklerSummit Berlin 2025
manfredsteyer
PRO
0
1
Advanced Micro Frontends: Multi Version/ Framework Scenarios
manfredsteyer
PRO
0
350
Advanced Micro Frontends: Multi Version/ Framework Scenarios @WAD 2025, Berlin
manfredsteyer
PRO
0
630
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
500
The Missing Link in Angular‘s Signal Story Resource API and httpResource @ngRome 2025
manfredsteyer
PRO
0
160
Your Architecture as a Crime Scene:Forensic Analysis
manfredsteyer
PRO
0
230
Rethinking Data Access: The New httpResource in Angular
manfredsteyer
PRO
0
360
Reactive Thinking with Signals, Resource API, and httpResource @Devm.io Angular 20 Launch Party
manfredsteyer
PRO
0
240
JavaScript as a Crime SceneForensic Analysis
manfredsteyer
PRO
0
130
Featured
See All Featured
Rails Girls Zürich Keynote
gr2m
95
14k
Building Better People: How to give real-time feedback that sticks.
wjessup
368
19k
Documentation Writing (for coders)
carmenintech
74
5k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.5k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.9k
KATA
mclloyd
32
14k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.6k
The Language of Interfaces
destraynor
161
25k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
The Pragmatic Product Professional
lauravandoore
36
6.9k
Transcript
@ManfredSteyer ManfredSteyer The Microfrontend Revolution Module Federation with Angular Manfred
Steyer, ANGULARarchitects.io
@ManfredSteyer
@ManfredSteyer Booking App Booking App Check-in App Check-in App Boarding
App Boarding App Luggage App Luggage App Micro Frontends
@ManfredSteyer Micro Frontends
@ManfredSteyer
@ManfredSteyer Contents #1: Module Federation #2: Federated Angular #3: Roadmap
@ManfredSteyer Manfred Steyer
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer Idea const Component = await import('http://other-app/xyz') Does not work
with webpack/ Angular CLI Even lazy parts must be known at compile time!
@ManfredSteyer Webpack 5 Module Federation Shell (Host) Microfrontend (Remote) //
Maps Urls in // webpack config remotes: { mfe1: "mfe1" } // Expose files in // webpack config exposes: { './Cmp': './my.cmp.ts' } import('mfe1/Cmp')
@ManfredSteyer How to Get the Microfrontend's URL? Shell (Host) Microfrontend
(Remote) RemoteEntry.js <script src="…"></script>
@ManfredSteyer How to Share Libs? Shell (Host) Microfrontend (Remote) shared:
[ "@angular/core", "…" ] shared: [ "@angular/core", "…" ]
@ManfredSteyer
@ManfredSteyer ?
@ManfredSteyer Custom Builder
@ManfredSteyer
@ManfredSteyer 1) ng add @angular-architects/module-federation 2) Adjust generated configuration 3)
ng serve
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer Well … Webpack 5 is final! CLI 11 is
final! CLI 11: Webpack 5 Opt-In (Experimental)
@ManfredSteyer Free eBook ANGULARarchitects.io/book Updated for Module Federation and Alternatives
@ManfredSteyer Conclusion Module Federation Loading Separately Deployed Code Micro Frontends
Federated Angular
@ManfredSteyer
@ManfredSteyer d Slides & Examples Remote Company Workshops and Consulting
http://angulararchitects.io