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 Micro Frontend Revolution: Module Federatio...
Search
Manfred Steyer
PRO
May 05, 2021
Programming
1
350
The Micro Frontend Revolution: Module Federation with Angular @JAX 2021
Manfred Steyer
PRO
May 05, 2021
Tweet
Share
More Decks by Manfred Steyer
See All by Manfred Steyer
Advanced Micro Frontends: Multi Version/ Framework Scenarios
manfredsteyer
PRO
0
300
Advanced Micro Frontends: Multi Version/ Framework Scenarios @WAD 2025, Berlin
manfredsteyer
PRO
0
610
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
470
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
220
Rethinking Data Access: The New httpResource in Angular
manfredsteyer
PRO
0
350
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
220
Other Decks in Programming
See All in Programming
為你自己學 Python - 冷知識篇
eddie
1
310
A Gopher's Guide to Vibe Coding
danicat
0
200
Honoアップデート 2025年夏
yusukebe
1
890
go test -json そして testing.T.Attr / Kyoto.go #63
utgwkk
1
200
Ruby Parser progress report 2025
yui_knk
1
260
Portapad紹介プレゼンテーション
gotoumakakeru
1
130
速いWebフレームワークを作る
yusukebe
3
1.4k
FindyにおけるTakumi活用と脆弱性管理のこれから
rvirus0817
0
340
Protocol Buffersの型を超えて拡張性を得る / Beyond Protocol Buffers Types Achieving Extensibility
linyows
0
100
AIでLINEスタンプを作ってみた
eycjur
1
220
テストカバレッジ100%を10年続けて得られた学びと品質
mottyzzz
2
410
TDD 実践ミニトーク
contour_gara
1
270
Featured
See All Featured
Into the Great Unknown - MozCon
thekraken
40
2k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.5k
Building Better People: How to give real-time feedback that sticks.
wjessup
368
19k
Making the Leap to Tech Lead
cromwellryan
134
9.5k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
510
Large-scale JavaScript Application Architecture
addyosmani
512
110k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Site-Speed That Sticks
csswizardry
10
800
How STYLIGHT went responsive
nonsquared
100
5.8k
A Tale of Four Properties
chriscoyier
160
23k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Transcript
@ManfredSteyer ManfredSteyer The Micro Frontend 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
@ManfredSteyer Micro Frontends
@ManfredSteyer
@ManfredSteyer Contents #1: Module Federation #2 Version Mismatch #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 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 Well … Webpack 5: final @angular-architects/module-federation: final 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 Version Mismatches
Federated Angular
@ManfredSteyer
@ManfredSteyer d Slides & Examples Remote Company Workshops and Consulting
http://angulararchitects.io