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
95
Your Perfect Project Setup for Angular @BASTA! 2025 in Mainz
manfredsteyer
PRO
0
150
Signals & Resource API in Angular: 3 Effective Rules for Your Architecture @BASTA 2025 in Mainz
manfredsteyer
PRO
0
110
Your Architecture as a Crime SceneForensic Analysis @BASTA! 2025 in Mainz, Germany
manfredsteyer
PRO
0
64
Your Architecture as a Crime SceneForensic Analysis @EntwicklerSummit Berlin 2025
manfredsteyer
PRO
0
36
Advanced Micro Frontends: Multi Version/ Framework Scenarios
manfredsteyer
PRO
0
390
Advanced Micro Frontends: Multi Version/ Framework Scenarios @WAD 2025, Berlin
manfredsteyer
PRO
0
650
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
Railsだからできる 例外業務に禍根を残さない 設定設計パターン
ei_ei_eiichi
0
410
CSC509 Lecture 04
javiergs
PRO
0
300
Things You Thought You Didn’t Need To Care About That Have a Big Impact On Your Job
hollycummins
0
210
After go func(): Goroutines Through a Beginner’s Eye
97vaibhav
0
300
ポスターセッション: 「まっすぐ行って、右!」って言ってラズパイカーを動かしたい 〜生成AI × Raspberry Pi Pico × Gradioの試作メモ〜
komofr
0
1.2k
私はどうやって技術力を上げたのか
yusukebe
43
18k
デミカツ切り抜きで面倒くさいことはPythonにやらせよう
aokswork3
0
220
CSC509 Lecture 03
javiergs
PRO
0
330
あなたの知らない「動画広告」の世界 - iOSDC Japan 2025
ukitaka
0
460
詳しくない分野でのVibe Codingで困ったことと学び/vibe-coding-in-unfamiliar-area
shibayu36
3
4.8k
高度なUI/UXこそHotwireで作ろう Kaigi on Rails 2025
naofumi
4
3.8k
Goで実践するドメイン駆動開発 AIと歩み始めた新規プロダクト開発の現在地
imkaoru
4
790
Featured
See All Featured
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
45
2.5k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
19
1.2k
Faster Mobile Websites
deanohume
310
31k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.6k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
114
20k
Agile that works and the tools we love
rasmusluckow
331
21k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
900
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.5k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.5k
Context Engineering - Making Every Token Count
addyosmani
5
210
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
32
2.3k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
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