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 with Angular: Module Federation...
Search
Manfred Steyer
PRO
December 15, 2020
Programming
0
880
Micro Frontends with Angular: Module Federation Deep Dive @ngBe
Manfred Steyer
PRO
December 15, 2020
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
170
The Missing Link in Angular‘s Signal Story Resource API and httpResource @ngRome 2025
manfredsteyer
PRO
0
80
Your Architecture as a Crime Scene:Forensic Analysis
manfredsteyer
PRO
0
140
Rethinking Data Access: The New httpResource in Angular
manfredsteyer
PRO
0
290
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
90
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
98
Your Architecture as a Crime SceneForensic Analysis
manfredsteyer
PRO
0
72
Other Decks in Programming
See All in Programming
LINEヤフー データグループ紹介
lycorp_recruit_jp
0
1.7k
『自分のデータだけ見せたい!』を叶える──Laravel × Casbin で複雑権限をスッキリ解きほぐす 25 分
akitotsukahara
1
600
Code as Context 〜 1にコードで 2にリンタ 34がなくて 5にルール? 〜
yodakeisuke
0
120
XP, Testing and ninja testing
m_seki
3
220
PHPでWebSocketサーバーを実装しよう2025
kubotak
0
250
「Cursor/Devin全社導入の理想と現実」のその後
saitoryc
0
690
WebViewの現在地 - SwiftUI時代のWebKit - / The Current State Of WebView
marcy731
0
110
0626 Findy Product Manager LT Night_高田スライド_speaker deck用
mana_takada
0
140
ペアプロ × 生成AI 現場での実践と課題について / generative-ai-in-pair-programming
codmoninc
0
630
Is Xcode slowly dying out in 2025?
uetyo
1
240
都市をデータで見るってこういうこと PLATEAU属性情報入門
nokonoko1203
1
590
ruby.wasmで多人数リアルタイム通信ゲームを作ろう
lnit
2
330
Featured
See All Featured
Done Done
chrislema
184
16k
Adopting Sorbet at Scale
ufuk
77
9.4k
The World Runs on Bad Software
bkeepers
PRO
69
11k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
500
Git: the NoSQL Database
bkeepers
PRO
430
65k
Documentation Writing (for coders)
carmenintech
72
4.9k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
940
Side Projects
sachag
455
42k
Building Adaptive Systems
keathley
43
2.6k
Build The Right Thing And Hit Your Dates
maggiecrowley
36
2.8k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Transcript
@ManfredSteyer ManfredSteyer Micro Frontends with Angular: Module Federation Deep Dive
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: Dynamic
Module Federation #4: Communication b/w MF #5 Version Mismatch #6: Multi Framework/ Version MF #7: 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 Dynamic Module Federation Shell (Host) Microfrontend (Remote) remotes: {
mfe1: "mfe1" } exposes: { Cmp: './my.cmp.ts' } import('mfe1/Cmp')
@ManfredSteyer Dynamic Module Federation Shell (Host) Microfrontend (Remote) remotes: {
} exposes: { Cmp: './my.cmp.ts' } import('mfe1/Cmp')
@ManfredSteyer Dynamic Module Federation Shell (Host) Microfrontend (Remote) remotes: {
} exposes: { Cmp: './my.cmp.ts' } loadRemoteModule({ remoteEntry: 'http://…', remoteName: 'mfe1', exposedModule: './Cmp' })
@ManfredSteyer Dynamic Module Federation Shell (Host) Microfrontend (Remote) remotes: {
} exposes: { Cmp: './my.cmp.ts' } loadRemoteModule({ remoteEntry: 'http://…', remoteName: 'mfe1', exposedModule: './Cmp' }) Helper Function using the Webpack API
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer Dealing with Version Mismatches SemVer by Default: Highest compatible
version Fallback: Use own version Relaxing: Configure a range of accepted versions Singleton: Warning or error
@ManfredSteyer Example for SemVer and Fallback • Shell: my-lib: ^10.0.0
• MFE1: my-lib: ^10.1.1 • MFE2: my-lib: ^9.0.0 Result: • Shell and MFE1 share ^10.1.1 • MFE2 falls back to its own version ^9.0.0
@ManfredSteyer However … • Shell: my-lib: ^10.0.0 • MFE1: my-lib:
^10.1.1 + MFE1: Dynamic Federation + Loading metadata too late Result: • Shell uses ^10.0.0 • MFE1 falls back to its own version ^10.1.1
@ManfredSteyer However … • Shell: my-lib: ^10.1.1 • MFE1: my-lib:
^10.0.0 + MFE1: Dynamic Federation + Loading metadata too late Result: • Shell and MFE1 share ^10.1.1
@ManfredSteyer Recommentation for Dynamic Federation Make sure, shell has highest
versions Or: Load metadata upfront!
@ManfredSteyer Configuring Singletons shared: { "my-lib": { singleton: true, strictVersion:
true // Error instead of warning! } }
@ManfredSteyer Relaxing Version Requirements shared: { "my-lib": { requiredVersion: ">=1.0.1
<11.1.1" } }
@ManfredSteyer
@ManfredSteyer Key Idea Share a Lib with a Communication Service
Message Passing? Separate Lib or Monorepo
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer Key Idea Expose Web Components via Module Federation However:
Bundle Size & Workarounds
@ManfredSteyer Example
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer Well … Webpack 5 is final! CLI is final
However: webpack5/CLI integration is experimental! https://github.com/angular/angular-cli/pull/18873 See Pitfalls: https://tinyurl.com/y8e57ol9
@ManfredSteyer Free eBook ANGULARarchitects.io/book Updated for Module Federation and Alternatives
@ManfredSteyer Conclusion Module Federation Loading Separately Deployed Code Federated Angular
Dynamic Federation Version Mismatches Multi Framework/ Version ?
@ManfredSteyer
@ManfredSteyer d Slides & Examples Remote Company Workshops and Consulting
http://angulararchitects.io