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
99
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
Building, Deploying, and Monitoring Ruby Web Applications with Falcon (Kaigi on Rails 2025)
ioquatix
4
1.8k
Flutterで分数(Fraction)を表示する方法
koukimiura
0
120
その面倒な作業、「Dart」にやらせませんか? Flutter開発者のための業務効率化
yordgenome03
0
110
Railsだからできる 例外業務に禍根を残さない 設定設計パターン
ei_ei_eiichi
0
420
ソフトウェア設計の実践的な考え方
masuda220
PRO
4
540
NetworkXとGNNで学ぶグラフデータ分析入門〜複雑な関係性を解き明かすPythonの力〜
mhrtech
3
1.2k
Conquering Massive Traffic Spikes in Ruby Applications with Pitchfork
riseshia
0
160
Pythonスレッドとは結局何なのか? CPython実装から見るNoGIL時代の変化
curekoshimizu
5
1.7k
CSC305 Lecture 05
javiergs
PRO
0
210
どの様にAIエージェントと 協業すべきだったのか?
takefumiyoshii
2
630
『毎日の移動』を支えるGoバックエンド内製開発
yutautsugi
2
220
10年もののAPIサーバーにおけるCI/CDの改善の奮闘
mbook
0
800
Featured
See All Featured
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
45
2.5k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.5k
Context Engineering - Making Every Token Count
addyosmani
5
210
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
Imperfection Machines: The Place of Print at Facebook
scottboms
269
13k
The Power of CSS Pseudo Elements
geoffreycrofte
79
6k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
54
3k
GraphQLの誤解/rethinking-graphql
sonatard
73
11k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
127
53k
Raft: Consensus for Rubyists
vanstee
139
7.1k
Making the Leap to Tech Lead
cromwellryan
135
9.6k
How STYLIGHT went responsive
nonsquared
100
5.8k
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