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
Advanced Micro Frontends: Multi Version/ Framework Scenarios
manfredsteyer
PRO
0
340
Advanced Micro Frontends: Multi Version/ Framework Scenarios @WAD 2025, Berlin
manfredsteyer
PRO
0
620
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
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @jax2025 in Mainz, Germany
manfredsteyer
PRO
0
230
Other Decks in Programming
See All in Programming
そのAPI、誰のため? Androidライブラリ設計における利用者目線の実践テクニック
mkeeda
2
360
アセットのコンパイルについて
ojun9
0
130
Reading Rails 1.0 Source Code
okuramasafumi
0
240
個人軟體時代
ethanhuang13
0
330
Android 16 × Jetpack Composeで縦書きテキストエディタを作ろう / Vertical Text Editor with Compose on Android 16
cc4966
2
250
パッケージ設計の黒魔術/Kyoto.go#63
lufia
3
440
Performance for Conversion! 分散トレーシングでボトルネックを 特定せよ
inetand
0
930
複雑なフォームに立ち向かう Next.js の技術選定
macchiitaka
2
170
Cache Me If You Can
ryunen344
2
1.5k
テストコードはもう書かない:JetBrains AI Assistantに委ねる非同期処理のテスト自動設計・生成
makun
0
390
Flutter with Dart MCP: All You Need - 박제창 2025 I/O Extended Busan
itsmedreamwalker
0
150
実用的なGOCACHEPROG実装をするために / golang.tokyo #40
mazrean
1
290
Featured
See All Featured
How to train your dragon (web standard)
notwaldorf
96
6.2k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
113
20k
Code Reviewing Like a Champion
maltzj
525
40k
Being A Developer After 40
akosma
90
590k
Statistics for Hackers
jakevdp
799
220k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Balancing Empowerment & Direction
lara
3
620
GitHub's CSS Performance
jonrohan
1032
460k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
Into the Great Unknown - MozCon
thekraken
40
2k
Gamification - CAS2011
davidbonilla
81
5.4k
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