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
Federated Angular: Micro Frontends with Module ...
Search
Manfred Steyer
PRO
February 25, 2021
Programming
0
750
Federated Angular: Micro Frontends with Module Federation @jsWorld 2021
Manfred Steyer
PRO
February 25, 2021
Tweet
Share
More Decks by Manfred Steyer
See All by Manfred Steyer
Advanced Micro Frontends: Multi Version/ Framework Scenarios
manfredsteyer
PRO
0
340
Advanced Micro Frontends: Multi Version/ Framework Scenarios @WAD 2025, Berlin
manfredsteyer
PRO
0
620
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
490
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
220
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
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @jax2025 in Mainz, Germany
manfredsteyer
PRO
0
230
Other Decks in Programming
See All in Programming
詳解!defer panic recover のしくみ / Understanding defer, panic, and recover
convto
0
240
さようなら Date。 ようこそTemporal! 3年間先行利用して得られた知見の共有
8beeeaaat
3
1.4k
🔨 小さなビルドシステムを作る
momeemt
4
680
「待たせ上手」なスケルトンスクリーン、 そのUXの裏側
teamlab
PRO
0
510
ユーザーも開発者も悩ませない TV アプリ開発 ~Compose の内部実装から学ぶフォーカス制御~
taked137
0
160
テストカバレッジ100%を10年続けて得られた学びと品質
mottyzzz
2
590
JSONataを使ってみよう Step Functionsが楽しくなる実践テクニック #devio2025
dafujii
1
530
MCPでVibe Working。そして、結局はContext Eng(略)/ Working with Vibe on MCP And Context Eng
rkaga
5
2.3k
為你自己學 Python - 冷知識篇
eddie
1
350
ソフトウェアテスト徹底指南書の紹介
goyoki
1
150
Navigation 2 を 3 に移行する(予定)ためにやったこと
yokomii
0
170
go test -json そして testing.T.Attr / Kyoto.go #63
utgwkk
3
300
Featured
See All Featured
Agile that works and the tools we love
rasmusluckow
330
21k
Rails Girls Zürich Keynote
gr2m
95
14k
Building Adaptive Systems
keathley
43
2.7k
Automating Front-end Workflow
addyosmani
1370
200k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.6k
Unsuck your backbone
ammeep
671
58k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
31
2.2k
The Art of Programming - Codeland 2020
erikaheidi
56
13k
KATA
mclloyd
32
14k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
13k
Transcript
@ManfredSteyer ManfredSteyer Federated Angular: Micro Frontends with Module Federation Manfred
Steyer, ANGULARarchitects.io
@ManfredSteyer
@ManfredSteyer Micro Frontends
@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 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