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 Federatio...
Search
Manfred Steyer
PRO
March 25, 2021
Programming
2
430
The Microfrontend Revolution: Module Federation with Angular
Manfred Steyer
PRO
March 25, 2021
Tweet
Share
More Decks by Manfred Steyer
See All by Manfred Steyer
Reactivity, Reimagined: Angular Signals at Every Layer
manfredsteyer
PRO
0
18
Angular Architecture Workshop @AngularDays in Berlin 2025
manfredsteyer
PRO
0
16
Migration to Signals, Resource API, and NgRx Signal Store
manfredsteyer
PRO
0
97
Reactive Thinking with Signals and the Resource API
manfredsteyer
PRO
0
100
All About Angular's New Signal Forms
manfredsteyer
PRO
0
200
Your Perfect Project Setup for Angular @BASTA! 2025 in Mainz
manfredsteyer
PRO
0
210
Signals & Resource API in Angular: 3 Effective Rules for Your Architecture @BASTA 2025 in Mainz
manfredsteyer
PRO
0
140
Your Architecture as a Crime SceneForensic Analysis @BASTA! 2025 in Mainz, Germany
manfredsteyer
PRO
0
78
Your Architecture as a Crime SceneForensic Analysis @EntwicklerSummit Berlin 2025
manfredsteyer
PRO
0
47
Other Decks in Programming
See All in Programming
『毎日の移動』を支えるGoバックエンド内製開発
yutautsugi
2
270
CSC509 Lecture 08
javiergs
PRO
0
230
コードとあなたと私の距離 / The Distance Between Code, You, and I
hiro_y
0
190
オープンソースソフトウェアへの解像度🔬
utam0k
17
3.1k
モテるデスク環境
mozumasu
3
1k
Devvox Belgium - Agentic AI Patterns
kdubois
1
140
スマホから Youtube Shortsを見られないようにする
lemolatoon
27
33k
NIKKEI Tech Talk#38
cipepser
0
120
Developer Joy - The New Paradigm
hollycummins
1
340
Flutterで分数(Fraction)を表示する方法
koukimiura
0
140
Writing Better Go: Lessons from 10 Code Reviews
konradreiche
3
5.7k
iOSでSVG画像を扱う
kishikawakatsumi
0
150
Featured
See All Featured
jQuery: Nuts, Bolts and Bling
dougneiner
65
7.9k
Code Review Best Practice
trishagee
72
19k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
230
22k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
YesSQL, Process and Tooling at Scale
rocio
173
15k
Leading Effective Engineering Teams in the AI Era
addyosmani
7
570
How STYLIGHT went responsive
nonsquared
100
5.8k
The Power of CSS Pseudo Elements
geoffreycrofte
79
6k
Large-scale JavaScript Application Architecture
addyosmani
514
110k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
14k
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.9k
Transcript
@ManfredSteyer ManfredSteyer The Microfrontend Revolution: Module Federation with Angular Manfred
Steyer, ANGULARarchitects.io
@ManfredSteyer
@ManfredSteyer Micro Frontends
@ManfredSteyer
@ManfredSteyer Contents #1: Module Federation #2: Version Mismatches #3: Federated
Angular #4: Possible 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 When can we have it? Webpack 5 and Module
Federation: final Angular CLI 11: Experimental Opt-in for webpack 5 Angular CLI 12: Official webpack 5 integration
@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 d Slides & Examples Remote Company Workshops and Consulting
http://angulararchitects.io