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 Angular: Module Federation...
Search
Manfred Steyer
PRO
December 15, 2020
Programming
0
880
Micro Frontends with Angular: Module Federation Deep Dive @ngBe
Manfred Steyer
PRO
December 15, 2020
Tweet
Share
More Decks by Manfred Steyer
See All by Manfred Steyer
Advanced Micro Frontends: Multi Version/ Framework Scenarios
manfredsteyer
PRO
0
300
Advanced Micro Frontends: Multi Version/ Framework Scenarios @WAD 2025, Berlin
manfredsteyer
PRO
0
610
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
480
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
350
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
220
Other Decks in Programming
See All in Programming
RDoc meets YARD
okuramasafumi
4
160
KessokuでDIでもgoroutineを活用する / Go Connect #6
mazrean
0
130
OSS開発者という働き方
andpad
5
1.6k
テストカバレッジ100%を10年続けて得られた学びと品質
mottyzzz
2
420
LLMOpsのパフォーマンスを支える技術と現場で実践した改善
po3rin
8
1k
Laravel Boost 超入門
fire_arlo
2
170
AIエージェント開発、DevOps and LLMOps
ymd65536
1
370
機能追加とリーダー業務の類似性
rinchoku
0
180
AIを活用し、今後に備えるための技術知識 / Basic Knowledge to Utilize AI
kishida
17
3.7k
私の後悔をAWS DMSで解決した話
hiramax
4
180
Ruby Parser progress report 2025
yui_knk
1
260
サーバーサイドのビルド時間87倍高速化
plaidtech
PRO
0
690
Featured
See All Featured
Designing for humans not robots
tammielis
253
25k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
Building an army of robots
kneath
306
46k
YesSQL, Process and Tooling at Scale
rocio
173
14k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
51
5.6k
A better future with KSS
kneath
239
17k
Automating Front-end Workflow
addyosmani
1370
200k
Transcript
@ManfredSteyer ManfredSteyer Micro Frontends with Angular: Module Federation Deep Dive
Manfred Steyer, ANGULARarchitects.io
@ManfredSteyer
@ManfredSteyer Booking App Booking App Check-in App Check-in App Boarding
App Boarding App Luggage App Luggage App Micro Frontends
@ManfredSteyer Micro Frontends
@ManfredSteyer
@ManfredSteyer Contents #1: Module Federation #2: Federated Angular #3: Dynamic
Module Federation #4: Communication b/w MF #5 Version Mismatch #6: Multi Framework/ Version MF #7: 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 Dynamic Module Federation Shell (Host) Microfrontend (Remote) remotes: {
mfe1: "mfe1" } 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({ remoteEntry: 'http://…', remoteName: 'mfe1', exposedModule: './Cmp' })
@ManfredSteyer Dynamic Module Federation Shell (Host) Microfrontend (Remote) remotes: {
} exposes: { Cmp: './my.cmp.ts' } loadRemoteModule({ remoteEntry: 'http://…', remoteName: 'mfe1', exposedModule: './Cmp' }) Helper Function using the Webpack API
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer Dealing with Version Mismatches SemVer by Default: Highest compatible
version Fallback: Use own version Relaxing: Configure a range of accepted versions Singleton: Warning or error
@ManfredSteyer Example for SemVer and Fallback • Shell: my-lib: ^10.0.0
• MFE1: my-lib: ^10.1.1 • MFE2: my-lib: ^9.0.0 Result: • Shell and MFE1 share ^10.1.1 • MFE2 falls back to its own version ^9.0.0
@ManfredSteyer However … • Shell: my-lib: ^10.0.0 • MFE1: my-lib:
^10.1.1 + MFE1: Dynamic Federation + Loading metadata too late Result: • Shell uses ^10.0.0 • MFE1 falls back to its own version ^10.1.1
@ManfredSteyer However … • Shell: my-lib: ^10.1.1 • MFE1: my-lib:
^10.0.0 + MFE1: Dynamic Federation + Loading metadata too late Result: • Shell and MFE1 share ^10.1.1
@ManfredSteyer Recommentation for Dynamic Federation Make sure, shell has highest
versions Or: Load metadata upfront!
@ManfredSteyer Configuring Singletons shared: { "my-lib": { singleton: true, strictVersion:
true // Error instead of warning! } }
@ManfredSteyer Relaxing Version Requirements shared: { "my-lib": { requiredVersion: ">=1.0.1
<11.1.1" } }
@ManfredSteyer
@ManfredSteyer Key Idea Share a Lib with a Communication Service
Message Passing? Separate Lib or Monorepo
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer Key Idea Expose Web Components via Module Federation However:
Bundle Size & Workarounds
@ManfredSteyer Example
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer Well … Webpack 5 is final! CLI is final
However: webpack5/CLI integration is experimental! https://github.com/angular/angular-cli/pull/18873 See Pitfalls: https://tinyurl.com/y8e57ol9
@ManfredSteyer Free eBook ANGULARarchitects.io/book Updated for Module Federation and Alternatives
@ManfredSteyer Conclusion Module Federation Loading Separately Deployed Code Federated Angular
Dynamic Federation Version Mismatches Multi Framework/ Version ?
@ManfredSteyer
@ManfredSteyer d Slides & Examples Remote Company Workshops and Consulting
http://angulararchitects.io