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
Federated Angular – Why and How? @ngConf 2021
Search
Manfred Steyer
PRO
April 25, 2021
Programming
0
370
Federated Angular – Why and How? @ngConf 2021
Manfred Steyer
PRO
April 25, 2021
Tweet
Share
More Decks by Manfred Steyer
See All by Manfred Steyer
Advanced Micro Frontends: Multi Version/ Framework Scenarios @WAD 2025, Berlin
manfredsteyer
PRO
0
25
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
220
The Missing Link in Angular‘s Signal Story Resource API and httpResource @ngRome 2025
manfredsteyer
PRO
0
87
Your Architecture as a Crime Scene:Forensic Analysis
manfredsteyer
PRO
0
150
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
93
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
Other Decks in Programming
See All in Programming
Quand Symfony, ApiPlatform, OpenAI et LangChain s'allient pour exploiter vos PDF : de la théorie à la production…
ahmedbhs123
0
190
Deep Dive into ~/.claude/projects
hiragram
14
2.5k
なぜ適用するか、移行して理解するClean Architecture 〜構造を超えて設計を継承する〜 / Why Apply, Migrate and Understand Clean Architecture - Inherit Design Beyond Structure
seike460
PRO
3
760
Hack Claude Code with Claude Code
choplin
4
2k
今ならAmazon ECSのサービス間通信をどう選ぶか / Selection of ECS Interservice Communication 2025
tkikuc
21
4k
Python型ヒント完全ガイド 初心者でも分かる、現代的で実践的な使い方
mickey_kubo
1
110
Webの外へ飛び出せ NativePHPが切り拓くPHPの未来
takuyakatsusa
2
550
PicoRuby on Rails
makicamel
2
130
イベントストーミング図からコードへの変換手順 / Procedure for Converting Event Storming Diagrams to Code
nrslib
2
810
なぜ「共通化」を考え、失敗を繰り返すのか
rinchoku
1
650
AIと”コードの評価関数”を共有する / Share the "code evaluation function" with AI
euglena1215
1
160
AI時代のソフトウェア開発を考える(2025/07版) / Agentic Software Engineering Findy 2025-07 Edition
twada
PRO
86
29k
Featured
See All Featured
Gamification - CAS2011
davidbonilla
81
5.4k
Why Our Code Smells
bkeepers
PRO
336
57k
Side Projects
sachag
455
42k
Making Projects Easy
brettharned
116
6.3k
Git: the NoSQL Database
bkeepers
PRO
430
65k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
6
300
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
How STYLIGHT went responsive
nonsquared
100
5.6k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
Speed Design
sergeychernyshev
32
1k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.5k
Transcript
@ManfredSteyer ManfredSteyer Federated Angular – Why and How? Manfred Steyer,
ANGULARarchitects.io
@ManfredSteyer Which one is the best?
@ManfredSteyer It’s all about consequences in your very situation!
@ManfredSteyer Micro Frontends
@ManfredSteyer Contents #1 Why: Real-World Case Studies #2 How: Module
Federation
@ManfredSteyer Manfred Steyer
@ManfredSteyer
@ManfredSteyer Deadalus Health Care (formerly AGFA Health Care)
@ManfredSteyer DATEV eG (~8000 Employees, 200 Products)
@ManfredSteyer Huge European Bank Domain A Domain B Domain C
Domain D Domain E Domain F eBanking
@ManfredSteyer Another Huge European Bank Details from Domain A Customer
Relationship Management Domain A Customer XYZ Domain B Domain C
@ManfredSteyer Quality Bytes (No Micro Frontends but Domain Cutting)
@ManfredSteyer Reasons for Micro Frontends Huge Product/ Product Suite Scaling
Teams & Domains Switching out Technologies Rapitely Changing Requirements
@ManfredSteyer Consequences Effort for „Meta Framework“ Sharing Code at Runtime
and Bundle Size Common Look and Feel
@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 Share Libs? Shell (Host) Microfrontend (Remote) shared:
[ "@angular/core", "…" ] shared: [ "@angular/core", "…" ]
@ManfredSteyer 1) ng add @angular-architects/module-federation 2) Adjust generated configuration 3)
ng serve
@ManfredSteyer
@ManfredSteyer Conclusion No free Lunch: Consequences Scaling Teams & Domains
Module Federation
@ManfredSteyer
@ManfredSteyer d Slides & Examples Remote Company Workshops and Consulting
http://angulararchitects.io