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: Beyond ...
Search
Manfred Steyer
PRO
November 17, 2022
Programming
0
810
Micro Frontends with Module Federation: Beyond the Basics
Manfred Steyer
PRO
November 17, 2022
Tweet
Share
More Decks by Manfred Steyer
See All by Manfred Steyer
Reactive Thinking with Signals and the Resource API
manfredsteyer
PRO
0
26
All About Angular's New Signal Forms
manfredsteyer
PRO
0
170
Your Perfect Project Setup for Angular @BASTA! 2025 in Mainz
manfredsteyer
PRO
0
190
Signals & Resource API in Angular: 3 Effective Rules for Your Architecture @BASTA 2025 in Mainz
manfredsteyer
PRO
0
130
Your Architecture as a Crime SceneForensic Analysis @BASTA! 2025 in Mainz, Germany
manfredsteyer
PRO
0
68
Your Architecture as a Crime SceneForensic Analysis @EntwicklerSummit Berlin 2025
manfredsteyer
PRO
0
44
Advanced Micro Frontends: Multi Version/ Framework Scenarios
manfredsteyer
PRO
0
400
Advanced Micro Frontends: Multi Version/ Framework Scenarios @WAD 2025, Berlin
manfredsteyer
PRO
0
660
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
540
Other Decks in Programming
See All in Programming
Server Side Kotlin Meetup vol.16: 内部動作を理解して ハイパフォーマンスなサーバサイド Kotlin アプリケーションを書こう
ternbusty
3
190
3年ぶりにコードを書いた元CTOが Claude Codeと30分でMVPを作った話
maikokojima
0
350
bootcamp2025_バックエンド研修_WebAPIサーバ作成.pdf
geniee_inc
0
110
ソフトウェア設計の実践的な考え方
masuda220
PRO
4
590
Foundation Modelsを実装日本語学習アプリを作ってみた!
hypebeans
0
110
Swift Concurrency - 状態監視の罠
objectiveaudio
2
530
他言語経験者が Golangci-lint を最初のコーディングメンターにした話 / How Golangci-lint Became My First Coding Mentor: A Story from a Polyglot Programmer
uma31
0
170
SwiftDataを使って10万件のデータを読み書きする
akidon0000
0
120
コードとあなたと私の距離 / The Distance Between Code, You, and I
hiro_y
0
170
オープンソースソフトウェアへの解像度🔬
utam0k
15
2.9k
CSC509 Lecture 05
javiergs
PRO
0
300
Catch Up: Go Style Guide Update
andpad
0
230
Featured
See All Featured
Making the Leap to Tech Lead
cromwellryan
135
9.6k
Building Flexible Design Systems
yeseniaperezcruz
329
39k
The Cost Of JavaScript in 2023
addyosmani
55
9k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.5k
How to train your dragon (web standard)
notwaldorf
97
6.3k
Large-scale JavaScript Application Architecture
addyosmani
514
110k
Imperfection Machines: The Place of Print at Facebook
scottboms
269
13k
Git: the NoSQL Database
bkeepers
PRO
431
66k
Optimizing for Happiness
mojombo
379
70k
Principles of Awesome APIs and How to Build Them.
keavy
127
17k
The Invisible Side of Design
smashingmag
302
51k
Mobile First: as difficult as doing things right
swwweet
224
10k
Transcript
@ManfredSteyer ManfredSteyer Micro Frontends with Module Federation: Beyond the Basics
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 #1 Version Mismatches #2 Mono vs. Multirepo #3 Dynamic
Federation #4 Multiple Frameworks/ Versions
@ManfredSteyer #1 Version Mismatches #2 Mono vs. Multirepo #3 Dynamic
Federation #4 Multiple Frameworks/ Versions #0 Module Federation 101
@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 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
@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 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
@ManfredSteyer
@ManfredSteyer Booking Boarding Shared Feature Feature Feature Feature Feature …
… … … … … … … … Booking App Boarding App Publish shared libs seperately via npm Repository n Repository 2 Repository 1 Version Mismatches? Strict Borders
@ManfredSteyer Booking Boarding Shared Feature Feature Feature Feature Feature …
… … … … … … … … Booking App Boarding App
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer https://nrwl.io/nx
@ManfredSteyer
@ManfredSteyer Dynamic Module Federation Shell (Host) Microfrontend (Remote) remotes: {
mfe1: "http://..." } 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
@ManfredSteyer
@ManfredSteyer const Component = await import('other-app/cmp');
@ManfredSteyer const main = await import('other-app/main'); main.bootstrap();
@ManfredSteyer const main = await import('other-app/main'); main.bootstrap(); const rootElm =
document.createElement('app-root') document.body.appendChild(rootElm);
@ManfredSteyer await import('other-app/main'); // Self-Bootstrapping const rootElm = document.createElement('app-root') document.body.appendChild(rootElm);
@ManfredSteyer await import('other-app/main'); const rootElm = document.createElement('app-root') document.body.appendChild(rootElm); WrapperComponent
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer https://red-ocean-0fe4c4610.azurestaticapps.net
@ManfredSteyer Free eBook (5th Edition) ANGULARarchitects.io/book Module Federation & Nx
@ManfredSteyer Conclusion Baked-in Strategies for Version Mismatches Monorepo vs. Multirepo:
Self-restriction vs. (Costly) Freedom Webpack Runtime API: Dynamic Federation Frankenstein: Bootstrapping Several SPAs
@ManfredSteyer d Slides & Examples Remote Company Workshops and Consulting
http://angulararchitects.io