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
Micro Frontends mit Module Federation: Der Begi...
Search
Manfred Steyer
PRO
April 28, 2021
Programming
0
210
Micro Frontends mit Module Federation: Der Beginn einer neuen Ära? @WDC2021
Manfred Steyer
PRO
April 28, 2021
Tweet
Share
More Decks by Manfred Steyer
See All by Manfred Steyer
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
200
The Missing Link in Angular‘s Signal Story Resource API and httpResource @ngRome 2025
manfredsteyer
PRO
0
82
Your Architecture as a Crime Scene:Forensic Analysis
manfredsteyer
PRO
0
140
Rethinking Data Access: The New httpResource in Angular
manfredsteyer
PRO
0
300
Reactive Thinking with Signals, Resource API, and httpResource @Devm.io Angular 20 Launch Party
manfredsteyer
PRO
0
190
JavaScript as a Crime SceneForensic Analysis
manfredsteyer
PRO
0
92
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @jax2025 in Mainz, Germany
manfredsteyer
PRO
0
170
Premier Disciplin for Micro Frontends Multi Version/ Framework Scenarios
manfredsteyer
PRO
0
100
Your Architecture as a Crime SceneForensic Analysis
manfredsteyer
PRO
0
75
Other Decks in Programming
See All in Programming
「Cursor/Devin全社導入の理想と現実」のその後
saitoryc
0
770
0626 Findy Product Manager LT Night_高田スライド_speaker deck用
mana_takada
0
150
第9回 情シス転職ミートアップ 株式会社IVRy(アイブリー)の紹介
ivry_presentationmaterials
1
270
WebViewの現在地 - SwiftUI時代のWebKit - / The Current State Of WebView
marcy731
0
110
『自分のデータだけ見せたい!』を叶える──Laravel × Casbin で複雑権限をスッキリ解きほぐす 25 分
akitotsukahara
2
620
Kotlin エンジニアへ送る:Swift 案件に参加させられる日に備えて~似てるけど色々違う Swift の仕様 / from Kotlin to Swift
lovee
1
260
Goで作る、開発・CI環境
sin392
0
210
Composerが「依存解決」のためにどんな工夫をしているか #phpcon
o0h
PRO
1
250
猫と暮らす Google Nest Cam生活🐈 / WebRTC with Google Nest Cam
yutailang0119
0
110
生成AIコーディングとの向き合い方、AIと共創するという考え方 / How to deal with generative AI coding and the concept of co-creating with AI
seike460
PRO
1
360
AIと”コードの評価関数”を共有する / Share the "code evaluation function" with AI
euglena1215
1
140
コードの90%をAIが書く世界で何が待っているのか / What awaits us in a world where 90% of the code is written by AI
rkaga
50
33k
Featured
See All Featured
Six Lessons from altMBA
skipperchong
28
3.9k
Being A Developer After 40
akosma
90
590k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
20
1.3k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
Mobile First: as difficult as doing things right
swwweet
223
9.7k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Statistics for Hackers
jakevdp
799
220k
Rebuilding a faster, lazier Slack
samanthasiow
82
9.1k
Producing Creativity
orderedlist
PRO
346
40k
The Cult of Friendly URLs
andyhume
79
6.5k
4 Signs Your Business is Dying
shpigford
184
22k
Transcript
@ManfredSteyer ManfredSteyer Micro Frontends mit Module Federation: Der Beginn einer
neuen Ära? 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
@ManfredSteyer Micro Frontends
@ManfredSteyer
@ManfredSteyer Contents #1: Module Federation #2 Version Mismatch #3: Federated
Angular #4: Dynamic Module Federation #5: 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 Default Behavior Selecting the highest compatible version 10.0 10.1
@ManfredSteyer Default Behavior Conflict: No highest compatible version 11.0 10.1
@ManfredSteyer Example • Shell: my-lib: ^10.0 • MFE1: my-lib: ^10.1
• MFE2: my-lib: ^9.0 • MFE3: my-lib: ^9.1 Result: • Shell and MFE1 share ^10.1 • MFE2 and MFE3 share ^9.1
@ManfredSteyer Configuring Singletons shared: { "my-lib": { singleton: true }
} 11.0 10.1
@ManfredSteyer Configuring Singletons shared: { "my-lib": { singleton: true, strictVersion:
true // Error instead of warning! } } 11.0 10.1
@ManfredSteyer Relaxing Version Requirements shared: { "my-lib": { requiredVersion: ">=1.0.1
<11.1.1" } }
@ManfredSteyer
@ManfredSteyer ?
@ManfredSteyer Custom Builder
@ManfredSteyer
@ManfredSteyer 1) ng add @angular-architects/module-federation 2) Adjust generated configuration 3)
ng serve
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer Well … Webpack 5: final @angular-architects/module-federation: final CLI 11:
Experimental webpack 5 support CLI 12: Official webpack 5 support (May 2021)
@ManfredSteyer Free eBook ANGULARarchitects.io/book Updated for Module Federation and Alternatives
@ManfredSteyer Conclusion Module Federation Loading Separately Deployed Code Scaling Teams!
Version Mismatches Federated Angular Dynamic Federation
@ManfredSteyer
@ManfredSteyer d Slides & Examples Remote Company Workshops and Consulting
http://angulararchitects.io