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 Federatio...
Search
Manfred Steyer
PRO
March 25, 2021
Programming
2
430
The Microfrontend Revolution: Module Federation with Angular
Manfred Steyer
PRO
March 25, 2021
Tweet
Share
More Decks by Manfred Steyer
See All by Manfred Steyer
Your Architecture as a Crime SceneForensic Analysis @EntwicklerSummit Berlin 2025
manfredsteyer
PRO
0
1
Advanced Micro Frontends: Multi Version/ Framework Scenarios
manfredsteyer
PRO
0
350
Advanced Micro Frontends: Multi Version/ Framework Scenarios @WAD 2025, Berlin
manfredsteyer
PRO
0
630
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
Other Decks in Programming
See All in Programming
How Android Uses Data Structures Behind The Scenes
l2hyunwoo
0
480
基礎から学ぶ大画面対応(Learning Large-Screen Support from the Ground Up)
tomoya0x00
0
4.3k
実用的なGOCACHEPROG実装をするために / golang.tokyo #40
mazrean
1
300
パッケージ設計の黒魔術/Kyoto.go#63
lufia
3
440
Navigation 2 を 3 に移行する(予定)ためにやったこと
yokomii
0
350
AIと私たちの学習の変化を考える - Claude Codeの学習モードを例に
azukiazusa1
11
4.4k
Android 16 × Jetpack Composeで縦書きテキストエディタを作ろう / Vertical Text Editor with Compose on Android 16
cc4966
2
270
RDoc meets YARD
okuramasafumi
4
170
Updates on MLS on Ruby (and maybe more)
sylph01
1
180
print("Hello, World")
eddie
2
530
個人軟體時代
ethanhuang13
0
330
ユーザーも開発者も悩ませない TV アプリ開発 ~Compose の内部実装から学ぶフォーカス制御~
taked137
0
190
Featured
See All Featured
Imperfection Machines: The Place of Print at Facebook
scottboms
268
13k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
Rails Girls Zürich Keynote
gr2m
95
14k
Reflections from 52 weeks, 52 projects
jeffersonlam
352
21k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.4k
GraphQLとの向き合い方2022年版
quramy
49
14k
How to Ace a Technical Interview
jacobian
279
23k
Being A Developer After 40
akosma
90
590k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
61k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
131
19k
Docker and Python
trallard
46
3.6k
Transcript
@ManfredSteyer ManfredSteyer The Microfrontend Revolution: Module Federation with Angular Manfred
Steyer, ANGULARarchitects.io
@ManfredSteyer
@ManfredSteyer Micro Frontends
@ManfredSteyer
@ManfredSteyer Contents #1: Module Federation #2: Version Mismatches #3: Federated
Angular #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: Experimental Opt-in for webpack 5 Angular CLI 12: Official webpack 5 integration
@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