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
Migration to Signals, Resource API, and NgRx Signal Store
manfredsteyer
PRO
0
6
Reactive Thinking with Signals and the Resource API
manfredsteyer
PRO
0
76
All About Angular's New Signal Forms
manfredsteyer
PRO
0
190
Your Perfect Project Setup for Angular @BASTA! 2025 in Mainz
manfredsteyer
PRO
0
200
Signals & Resource API in Angular: 3 Effective Rules for Your Architecture @BASTA 2025 in Mainz
manfredsteyer
PRO
0
140
Your Architecture as a Crime SceneForensic Analysis @BASTA! 2025 in Mainz, Germany
manfredsteyer
PRO
0
75
Your Architecture as a Crime SceneForensic Analysis @EntwicklerSummit Berlin 2025
manfredsteyer
PRO
0
46
Advanced Micro Frontends: Multi Version/ Framework Scenarios
manfredsteyer
PRO
0
410
Advanced Micro Frontends: Multi Version/ Framework Scenarios @WAD 2025, Berlin
manfredsteyer
PRO
0
660
Other Decks in Programming
See All in Programming
(Extension DC 2025) Actor境界を越える技術
teamhimeh
1
260
Le côté obscur des IA génératives
pascallemerrer
0
150
Server Side Kotlin Meetup vol.16: 内部動作を理解して ハイパフォーマンスなサーバサイド Kotlin アプリケーションを書こう
ternbusty
3
220
Go言語はstack overflowの夢を見るか?
logica0419
0
430
Software Architecture
hschwentner
6
2.3k
Devoxx BE 2025 Loom lab
josepaumard
0
100
Building, Deploying, and Monitoring Ruby Web Applications with Falcon (Kaigi on Rails 2025)
ioquatix
4
2.3k
あなたとKaigi on Rails / Kaigi on Rails + You
shimoju
0
170
AI Coding Meetup #3 - 導入セッション / ai-coding-meetup-3
izumin5210
0
3.4k
ALL CODE BASE ARE BELONG TO STUDY
uzulla
25
6.4k
株式会社 Sun terras カンパニーデック
sunterras
0
360
エンジニアインターン「Treasure」とHonoの2年、そして未来へ / Our Journey with Hono Two Years at Treasure and Beyond
carta_engineering
0
340
Featured
See All Featured
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
508
140k
Facilitating Awesome Meetings
lara
56
6.6k
A better future with KSS
kneath
239
18k
The Cult of Friendly URLs
andyhume
79
6.6k
Code Reviewing Like a Champion
maltzj
526
40k
The Language of Interfaces
destraynor
162
25k
The Illustrated Children's Guide to Kubernetes
chrisshort
49
51k
How to Ace a Technical Interview
jacobian
280
24k
Building a Scalable Design System with Sketch
lauravandoore
463
33k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Into the Great Unknown - MozCon
thekraken
40
2.1k
It's Worth the Effort
3n
187
28k
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