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
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
160
The Missing Link in Angular‘s Signal Story Resource API and httpResource @ngRome 2025
manfredsteyer
PRO
0
75
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
97
Your Architecture as a Crime SceneForensic Analysis
manfredsteyer
PRO
0
72
Other Decks in Programming
See All in Programming
Select API from Kotlin Coroutine
jmatsu
1
190
Rubyでやりたい駆動開発 / Ruby driven development
chobishiba
1
500
なんとなくわかった気になるブロックテーマ入門/contents.nagoya 2025 6.28
chiilog
1
240
今ならAmazon ECSのサービス間通信をどう選ぶか / Selection of ECS Interservice Communication 2025
tkikuc
20
3.8k
PHP 8.4の新機能「プロパティフック」から学ぶオブジェクト指向設計とリスコフの置換原則
kentaroutakeda
2
670
Azure AI Foundryではじめてのマルチエージェントワークフロー
seosoft
0
150
型付きアクターモデルがもたらす分散シミュレーションの未来
piyo7
0
810
第9回 情シス転職ミートアップ 株式会社IVRy(アイブリー)の紹介
ivry_presentationmaterials
1
250
Blazing Fast UI Development with Compose Hot Reload (droidcon New York 2025)
zsmb
1
260
Node-RED を(HTTP で)つなげる MCP サーバーを作ってみた
highu
0
110
deno-redisの紹介とJSRパッケージの運用について (toranoana.deno #21)
uki00a
0
160
コードの90%をAIが書く世界で何が待っているのか / What awaits us in a world where 90% of the code is written by AI
rkaga
48
32k
Featured
See All Featured
Making the Leap to Tech Lead
cromwellryan
134
9.4k
Building Adaptive Systems
keathley
43
2.6k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
680
A better future with KSS
kneath
239
17k
Rebuilding a faster, lazier Slack
samanthasiow
82
9.1k
What's in a price? How to price your products and services
michaelherold
246
12k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.3k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
RailsConf 2023
tenderlove
30
1.1k
Gamification - CAS2011
davidbonilla
81
5.3k
Being A Developer After 40
akosma
90
590k
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