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
Angular-based Micro Frontends with Module Fede...
Search
Manfred Steyer
PRO
September 01, 2022
Programming
0
650
Angular-based Micro Frontends with Module Federation @ngconf 2022
Manfred Steyer
PRO
September 01, 2022
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
470
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
ライブ配信サービスの インフラのジレンマ -マルチクラウドに至ったワケ-
mirrativ
2
270
コーディングは技術者(エンジニア)の嗜みでして / Learning the System Development Mindset from Rock Lady
mackey0225
2
630
Zendeskのチケットを Amazon Bedrockで 解析した
ryokosuge
3
230
A Gopher's Guide to Vibe Coding
danicat
0
200
250830 IaCの選定~AWS SAMのLambdaをECSに乗り換えたときの備忘録~
east_takumi
0
350
testingを眺める
matumoto
1
130
Laravel Boost 超入門
fire_arlo
2
170
tool ディレクティブを導入してみた感想
sgash708
1
160
ECS初心者の仲間 – TUIツール「e1s」の紹介
keidarcy
0
140
フロントエンドのmonorepo化と責務分離のリアーキテクト
kajitack
2
150
Rancher と Terraform
fufuhu
2
170
速いWebフレームワークを作る
yusukebe
3
710
Featured
See All Featured
Done Done
chrislema
185
16k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3k
Fireside Chat
paigeccino
39
3.6k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
790
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Agile that works and the tools we love
rasmusluckow
330
21k
Rails Girls Zürich Keynote
gr2m
95
14k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
31
2.2k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
For a Future-Friendly Web
brad_frost
179
9.9k
Transcript
@ManfredSteyer ManfredSteyer Angular-based 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 #1 Static & Dynamic Federation #2 Sharing Libs &
Data #3 Combining Frameworks
@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) remotes: { } exposes: {
Cmp: './my.cmp.ts' } import('mfe1/Cmp')
@ManfredSteyer Shell (Host) Microfrontend (Remote) remotes: { } exposes: {
Cmp: './my.cmp.ts' } loadRemoteModule({ type: 'module', remoteEntry: 'http://…', exposedModule: './Cmp' })
@ManfredSteyer Shell (Host) Microfrontend (Remote) RemoteEntry.js <script src="…"></script>
@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
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer Wrap them into Web Components Angular App (MFE) React
App (MFE)
@ManfredSteyer await import('other-app/my-cmp'); WrapperComponent
@ManfredSteyer await import('other-app/my-cmp'); const rootElm = document.createElement('my-cmp') document.body.appendChild(rootElm); WrapperComponent
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer Free eBook (5th Edition) ANGULARarchitects.io/book Module Federation & Nx
@ManfredSteyer d Slides & Examples Remote Company Workshops and Consulting