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
Your Architecture as a Crime SceneForensic Analysis @EntwicklerSummit Berlin 2025
manfredsteyer
PRO
0
1
Advanced Micro Frontends: Multi Version/ Framework Scenarios
manfredsteyer
PRO
0
350
Advanced Micro Frontends: Multi Version/ Framework Scenarios @WAD 2025, Berlin
manfredsteyer
PRO
0
630
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
500
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
230
Rethinking Data Access: The New httpResource in Angular
manfredsteyer
PRO
0
360
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
Other Decks in Programming
See All in Programming
Amazon RDS 向けに提供されている MCP Server と仕組みを調べてみた/jawsug-okayama-2025-aurora-mcp
takahashiikki
1
120
意外と簡単!?フロントエンドでパスキー認証を実現する WebAuthn
teamlab
PRO
2
780
FindyにおけるTakumi活用と脆弱性管理のこれから
rvirus0817
0
540
Performance for Conversion! 分散トレーシングでボトルネックを 特定せよ
inetand
0
3.4k
奥深くて厄介な「改行」と仲良くなる20分
oguemon
1
570
チームのテスト力を鍛える
goyoki
3
930
「手軽で便利」に潜む罠。 Popover API を WCAG 2.2の視点で安全に使うには
taitotnk
0
870
Reading Rails 1.0 Source Code
okuramasafumi
0
250
速いWebフレームワークを作る
yusukebe
5
1.7k
Flutter with Dart MCP: All You Need - 박제창 2025 I/O Extended Busan
itsmedreamwalker
0
150
250830 IaCの選定~AWS SAMのLambdaをECSに乗り換えたときの備忘録~
east_takumi
0
400
個人開発で徳島大学生60%以上の心を掴んだアプリ、そして手放した話
akidon0000
1
150
Featured
See All Featured
Art, The Web, and Tiny UX
lynnandtonic
303
21k
Into the Great Unknown - MozCon
thekraken
40
2k
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.6k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
127
53k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.9k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Speed Design
sergeychernyshev
32
1.1k
The Straight Up "How To Draw Better" Workshop
denniskardys
236
140k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
BBQ
matthewcrist
89
9.8k
Designing for humans not robots
tammielis
253
25k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
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