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
manfredsteyer
PRO
0
350
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
Namespace and Its Future
tagomoris
6
710
アセットのコンパイルについて
ojun9
0
130
JSONataを使ってみよう Step Functionsが楽しくなる実践テクニック #devio2025
dafujii
1
630
基礎から学ぶ大画面対応(Learning Large-Screen Support from the Ground Up)
tomoya0x00
0
3.3k
Updates on MLS on Ruby (and maybe more)
sylph01
1
180
個人軟體時代
ethanhuang13
0
330
今だからこそ入門する Server-Sent Events (SSE)
nearme_tech
PRO
3
250
print("Hello, World")
eddie
2
530
AI時代のUIはどこへ行く?
yusukebe
18
9.1k
FindyにおけるTakumi活用と脆弱性管理のこれから
rvirus0817
0
540
概念モデル→論理モデルで気をつけていること
sunnyone
3
300
Rancher と Terraform
fufuhu
2
550
Featured
See All Featured
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
131
19k
A Modern Web Designer's Workflow
chriscoyier
696
190k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
Designing for Performance
lara
610
69k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
The Power of CSS Pseudo Elements
geoffreycrofte
77
6k
Java REST API Framework Comparison - PWX 2021
mraible
33
8.8k
Building Better People: How to give real-time feedback that sticks.
wjessup
368
19k
Practical Orchestrator
shlominoach
190
11k
Making the Leap to Tech Lead
cromwellryan
135
9.5k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Producing Creativity
orderedlist
PRO
347
40k
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