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
Micro Frontends with Module Federation @MicroFr...
Search
Manfred Steyer
PRO
January 11, 2023
Programming
0
1.1k
Micro Frontends with Module Federation @MicroFrontend Summit 2023
Manfred Steyer
PRO
January 11, 2023
Tweet
Share
More Decks by Manfred Steyer
See All by Manfred Steyer
All About Angular's New Signal Forms
manfredsteyer
PRO
0
16
Your Perfect Project Setup for Angular @BASTA! 2025 in Mainz
manfredsteyer
PRO
0
90
Signals & Resource API in Angular: 3 Effective Rules for Your Architecture @BASTA 2025 in Mainz
manfredsteyer
PRO
0
74
Your Architecture as a Crime SceneForensic Analysis @BASTA! 2025 in Mainz, Germany
manfredsteyer
PRO
0
50
Your Architecture as a Crime SceneForensic Analysis @EntwicklerSummit Berlin 2025
manfredsteyer
PRO
0
31
Advanced Micro Frontends: Multi Version/ Framework Scenarios
manfredsteyer
PRO
0
380
Advanced Micro Frontends: Multi Version/ Framework Scenarios @WAD 2025, Berlin
manfredsteyer
PRO
0
640
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
510
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
LLMとPlaywright/reg-suitを活用した jQueryリファクタリングの実際
kinocoboy2
4
650
iOSDC.pdf
chronos2500
2
640
高度なUI/UXこそHotwireで作ろう Kaigi on Rails 2025
naofumi
4
2.6k
AIエージェント時代における TypeScriptスキーマ駆動開発の新たな役割
bicstone
4
1.2k
いま中途半端なSwift 6対応をするより、Default ActorやApproachable Concurrencyを有効にしてからでいいんじゃない?
yimajo
2
210
Web技術を最大限活用してRAW画像を現像する / Developing RAW Images on the Web
ssssota
2
1k
Go Conference 2025: Goで体感するMultipath TCP ― Go 1.24 時代の MPTCP Listener を理解する
takehaya
7
1.4k
フロントエンド開発に役立つクライアントプログラム共通のノウハウ / Universal client-side programming best practices for frontend development
nrslib
7
3.8k
プロダクト開発をAI 1stに変革する〜SaaS is dead時代で生き残るために〜 / AI 1st Product Development
kobakei
0
440
TokyoR#119 bignners session2 Visualization
kotatyamtema
0
130
uniqueパッケージの内部実装を支えるweak pointerの話
magavel
0
820
10年もののAPIサーバーにおけるCI/CDの改善の奮闘
mbook
0
630
Featured
See All Featured
Why Our Code Smells
bkeepers
PRO
339
57k
Faster Mobile Websites
deanohume
310
31k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.5k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
30
2.9k
Large-scale JavaScript Application Architecture
addyosmani
513
110k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Done Done
chrislema
185
16k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Making Projects Easy
brettharned
118
6.4k
Transcript
@ManfredSteyer ManfredSteyer Micro Frontends with Module Federation Manfred Steyer, ANGULARarchitects.io
@ManfredSteyer Booking App Check-in App Boarding App Luggage App
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer const Component = await import('other-app/cmp');
@ManfredSteyer #1a Module Federation #1b Sharing Libs and Data #3
Dealing with Version Mismatches #4 Multiple Frameworks/ Versions
@ManfredSteyer Manfred Steyer
@ManfredSteyer
@ManfredSteyer Shell (Host) Microfrontend (Remote) // Maps Urls in //
webpack config remotes: { mfe1: "http://..." } // Expose files in // webpack config exposes: { './Cmp': './my.cmp.ts' } import('mfe1/Cmp')
@ManfredSteyer Dynamic Module Federation Shell (Host) Microfrontend (Remote) remotes: {
} exposes: { './Cmp': './my.cmp.ts' } import('mfe1/Cmp')
@ManfredSteyer Dynamic Module Federation Shell (Host) Microfrontend (Remote) remotes: {
} exposes: { './Cmp': './my.cmp.ts' } loadRemoteModule({ type: 'module', remoteEntry: 'http://…', exposedModule: './Cmp' })
@ManfredSteyer Dynamic Module Federation Shell (Host) Microfrontend (Remote) remotes: {
} exposes: { './Cmp': './my.cmp.ts' } loadRemoteModule({ type: 'module', remoteEntry: 'http://…', exposedModule: './Cmp' }) Helper Function using the Webpack API
@ManfredSteyer Shell (Host) Microfrontend (Remote) shared: [ "@angular/core", "…" ]
shared: [ "@angular/core", "…" ]
@ManfredSteyer 1) ng add @angular-architects/module-federation 2) Adjust generated configuration 3)
ng serve
@ManfredSteyer 1) Adjust your webpack.config.js 2) Start your application
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer Selecting the highest compatible version 10.0 10.1
@ManfredSteyer Conflict: No highest compatible version 11.0 10.1
@ManfredSteyer shared: { "my-lib": { singleton: true } } 11.0
10.1
@ManfredSteyer in general, however, …
@ManfredSteyer • Framework with two libs a and b •
a is using internal APIs of b • a could be an compiled app too (Don't use ^ or ~ in your package.json)
@ManfredSteyer shared: { "my-lib": { singleton: true, strictVersion: true //
Error instead of warning! } } 11.0 10.1
@ManfredSteyer shared: { "my-lib": { requiredVersion: ">=1.0.1 <11.1.1" } }
@ManfredSteyer •Several options baked-in •However, best option: avoid conflicts upfront
• Option 1: Monorepo • Option 2: Loading several SPAs + sharing nothing!
@ManfredSteyer
@ManfredSteyer const Component = await import('other-app/cmp');
@ManfredSteyer await import('other-app/web-cmp');
@ManfredSteyer const main = await import('other-app/web-cmp'); const elm = document.createElement('my-web-cmp')
document.body.appendChild(elm);
@ManfredSteyer await import('other-app/web-cmp'); const elm = document.createElement('my-web-cmp') document.body.appendChild(elm); WrapperComponent
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer https://red-ocean-0fe4c4610.azurestaticapps.net
@ManfredSteyer Free eBook (5th Edition) ANGULARarchitects.io/book
@ManfredSteyer Conclusion Loading separately compiled code & sharing libs Baked-in
Strategies for Version Mismatches Webpack Runtime API: Dynamic Federation Frankenstein: Bootstrapping Several SPAs
@ManfredSteyer d Slides & Examples Remote Company Workshops and Consulting
http://angulararchitects.io