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
April 14, 2021
Programming
1
480
The Microfrontend Revolution: Module Federation with Angular @μCon 2021
Manfred Steyer
PRO
April 14, 2021
Tweet
Share
More Decks by Manfred Steyer
See All by Manfred Steyer
Advanced Micro Frontends: Multi Version/ Framework Scenarios
manfredsteyer
PRO
0
29
Advanced Micro Frontends: Multi Version/ Framework Scenarios @WAD 2025, Berlin
manfredsteyer
PRO
0
390
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
270
The Missing Link in Angular‘s Signal Story Resource API and httpResource @ngRome 2025
manfredsteyer
PRO
0
100
Your Architecture as a Crime Scene:Forensic Analysis
manfredsteyer
PRO
0
160
Rethinking Data Access: The New httpResource in Angular
manfredsteyer
PRO
0
310
Reactive Thinking with Signals, Resource API, and httpResource @Devm.io Angular 20 Launch Party
manfredsteyer
PRO
0
200
JavaScript as a Crime SceneForensic Analysis
manfredsteyer
PRO
0
96
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @jax2025 in Mainz, Germany
manfredsteyer
PRO
0
180
Other Decks in Programming
See All in Programming
20250704_教育事業におけるアジャイルなデータ基盤構築
hanon52_
5
1.1k
「テストは愚直&&網羅的に書くほどよい」という誤解 / Test Smarter, Not Harder
munetoshi
0
200
The Evolution of Enterprise Java with Jakarta EE 11 and Beyond
ivargrimstad
0
260
Goで作る、開発・CI環境
sin392
0
260
AI時代の『改訂新版 良いコード/悪いコードで学ぶ設計入門』 / ai-good-code-bad-code
minodriven
23
9.6k
状態遷移図を書こう / Sequence Chart vs State Diagram
orgachem
PRO
2
200
Rails Frontend Evolution: It Was a Setup All Along
skryukov
0
280
効率的な開発手段として VRTを活用する
ishkawa
0
160
Agentic Coding: The Future of Software Development with Agents
mitsuhiko
0
130
おやつのお供はお決まりですか?@WWDC25 Recap -Japan-\(region).swift
shingangan
0
140
型で語るカタ
irof
0
700
NEWT Backend Evolution
xpromx
1
140
Featured
See All Featured
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
A better future with KSS
kneath
238
17k
A Modern Web Designer's Workflow
chriscoyier
695
190k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.5k
Writing Fast Ruby
sferik
628
62k
For a Future-Friendly Web
brad_frost
179
9.8k
A Tale of Four Properties
chriscoyier
160
23k
Music & Morning Musume
bryan
46
6.7k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
The Language of Interfaces
destraynor
158
25k
Testing 201, or: Great Expectations
jmmastey
43
7.6k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Transcript
@ManfredSteyer ManfredSteyer The Microfrontend Revolution Webpack 5 Module Federation Manfred
Steyer, ANGULARarchitects.io
@ManfredSteyer
@ManfredSteyer Booking App Booking App Check-in App Check-in App Boarding
App Boarding App Luggage App Luggage App Microfrontends
@ManfredSteyer Micro Frontends
@ManfredSteyer
@ManfredSteyer Contents #1: Module Federation #2: Federated Angular #3: Live-Coding
#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 ?
@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 11 + webpack 5: experimental Angular CLI 12 (May 2021): webpack 5 integrated
@ManfredSteyer Free eBook Now: 3rd Edition ANGULARarchitects.io/book Updated for Module
Federation and Alternatives (~100 pages)
@ManfredSteyer Conclusion Module Federation Loading Separately Deployed Code Micro Frontends
Federated Angular
@ManfredSteyer
@ManfredSteyer d Slides & Examples Remote Company Workshops and Consulting
http://angulararchitects.io