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 Microfrontend Revolution Module Federation ...
Search
Manfred Steyer
PRO
November 20, 2020
Programming
0
360
The Microfrontend Revolution Module Federation with Angular @ngConf
Manfred Steyer
PRO
November 20, 2020
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
180
The Missing Link in Angular‘s Signal Story Resource API and httpResource @ngRome 2025
manfredsteyer
PRO
0
82
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
99
Your Architecture as a Crime SceneForensic Analysis
manfredsteyer
PRO
0
72
Other Decks in Programming
See All in Programming
Deep Dive into ~/.claude/projects
hiragram
11
2.3k
第9回 情シス転職ミートアップ 株式会社IVRy(アイブリー)の紹介
ivry_presentationmaterials
1
260
GitHub Copilot and GitHub Codespaces Hands-on
ymd65536
2
140
なぜ適用するか、移行して理解するClean Architecture 〜構造を超えて設計を継承する〜 / Why Apply, Migrate and Understand Clean Architecture - Inherit Design Beyond Structure
seike460
PRO
3
730
ペアプロ × 生成AI 現場での実践と課題について / generative-ai-in-pair-programming
codmoninc
1
5.3k
AWS CDKの推しポイント 〜CloudFormationと比較してみた〜
akihisaikeda
3
320
git worktree × Claude Code × MCP ~生成AI時代の並列開発フロー~
hisuzuya
1
520
今ならAmazon ECSのサービス間通信をどう選ぶか / Selection of ECS Interservice Communication 2025
tkikuc
21
3.8k
生成AIコーディングとの向き合い方、AIと共創するという考え方 / How to deal with generative AI coding and the concept of co-creating with AI
seike460
PRO
1
350
Cursor AI Agentと伴走する アプリケーションの高速リプレイス
daisuketakeda
1
130
AIエージェントはこう育てる - GitHub Copilot Agentとチームの共進化サイクル
koboriakira
0
490
童醫院敏捷轉型的實踐經驗
cclai999
0
210
Featured
See All Featured
VelocityConf: Rendering Performance Case Studies
addyosmani
331
24k
Bash Introduction
62gerente
614
210k
Automating Front-end Workflow
addyosmani
1370
200k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
281
13k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
107
19k
A designer walks into a library…
pauljervisheath
207
24k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.4k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.8k
Embracing the Ebb and Flow
colly
86
4.7k
The Straight Up "How To Draw Better" Workshop
denniskardys
234
140k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
Transcript
@ManfredSteyer ManfredSteyer The Microfrontend Revolution Module Federation with Angular Manfred
Steyer, ANGULARarchitects.io
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer Contents #1: Module Federation #2 Federated Angular #3: 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 ?
@ManfredSteyer Custom Builder
@ManfredSteyer
@ManfredSteyer 1) ng add @angular-architects/module-federation 2) Adjust generated configuration 3)
ng serve
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer When can we have it? Webpack 5 and Module
Federation: final Angular CLI must support webpack 5 too Angular CLI 11 (Beta) allows to opt into webpack 5 Angular CLI 11 ? (fall 2020)
@ManfredSteyer Free eBook ANGULARarchitects.io/book Updated for Module Federation and Alternatives
@ManfredSteyer Conclusion Module Federation Loading Separately Deployed Code Micro Frontends
Federated Angular
@ManfredSteyer d Slides & Examples Remote Company Workshops and Consulting
http://angulararchitects.io