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
All About Angular's New Signal Forms
manfredsteyer
PRO
0
130
Your Perfect Project Setup for Angular @BASTA! 2025 in Mainz
manfredsteyer
PRO
0
170
Signals & Resource API in Angular: 3 Effective Rules for Your Architecture @BASTA 2025 in Mainz
manfredsteyer
PRO
0
120
Your Architecture as a Crime SceneForensic Analysis @BASTA! 2025 in Mainz, Germany
manfredsteyer
PRO
0
67
Your Architecture as a Crime SceneForensic Analysis @EntwicklerSummit Berlin 2025
manfredsteyer
PRO
0
42
Advanced Micro Frontends: Multi Version/ Framework Scenarios
manfredsteyer
PRO
0
400
Advanced Micro Frontends: Multi Version/ Framework Scenarios @WAD 2025, Berlin
manfredsteyer
PRO
0
660
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
530
The Missing Link in Angular‘s Signal Story Resource API and httpResource @ngRome 2025
manfredsteyer
PRO
0
170
Other Decks in Programming
See All in Programming
10年もののAPIサーバーにおけるCI/CDの改善の奮闘
mbook
0
820
CSC305 Lecture 03
javiergs
PRO
0
240
デミカツ切り抜きで面倒くさいことはPythonにやらせよう
aokswork3
0
230
2分台で1500examples完走!爆速CIを支える環境構築術 - Kaigi on Rails 2025
falcon8823
3
3.6k
いま中途半端なSwift 6対応をするより、Default ActorやApproachable Concurrencyを有効にしてからでいいんじゃない?
yimajo
2
410
株式会社 Sun terras カンパニーデック
sunterras
0
290
Cursorハンズオン実践!
eltociear
2
1k
バッチ処理を「状態の記録」から「事実の記録」へ
panda728
PRO
0
150
CSC509 Lecture 06
javiergs
PRO
0
260
Devoxx BE - Local Development in the AI Era
kdubois
0
130
なぜあの開発者はDevRelに伴走し続けるのか / Why Does That Developer Keep Running Alongside DevRel?
nrslib
3
400
uniqueパッケージの内部実装を支えるweak pointerの話
magavel
0
990
Featured
See All Featured
Music & Morning Musume
bryan
46
6.8k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
9
590
Building a Scalable Design System with Sketch
lauravandoore
463
33k
Learning to Love Humans: Emotional Interface Design
aarron
274
41k
Imperfection Machines: The Place of Print at Facebook
scottboms
269
13k
Why Our Code Smells
bkeepers
PRO
339
57k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
30
2.7k
GitHub's CSS Performance
jonrohan
1032
470k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.6k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
140
34k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
37
2.6k
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