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
640
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
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
180
The Missing Link in Angular‘s Signal Story Resource API and httpResource @ngRome 2025
manfredsteyer
PRO
0
82
Your Architecture as a Crime Scene:Forensic Analysis
manfredsteyer
PRO
0
140
Rethinking Data Access: The New httpResource in Angular
manfredsteyer
PRO
0
290
Reactive Thinking with Signals, Resource API, and httpResource @Devm.io Angular 20 Launch Party
manfredsteyer
PRO
0
190
JavaScript as a Crime SceneForensic Analysis
manfredsteyer
PRO
0
90
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @jax2025 in Mainz, Germany
manfredsteyer
PRO
0
170
Premier Disciplin for Micro Frontends Multi Version/ Framework Scenarios
manfredsteyer
PRO
0
98
Your Architecture as a Crime SceneForensic Analysis
manfredsteyer
PRO
0
72
Other Decks in Programming
See All in Programming
A2A プロトコルを試してみる
azukiazusa1
2
1.3k
20250628_非エンジニアがバイブコーディングしてみた
ponponmikankan
0
640
Kotlin エンジニアへ送る:Swift 案件に参加させられる日に備えて~似てるけど色々違う Swift の仕様 / from Kotlin to Swift
lovee
1
260
エンジニア向け採用ピッチ資料
inusan
0
180
ペアプロ × 生成AI 現場での実践と課題について / generative-ai-in-pair-programming
codmoninc
1
5.3k
dbt民主化とLLMによる開発ブースト ~ AI Readyな分析サイクルを目指して ~
yoshyum
3
370
たった 1 枚の PHP ファイルで実装する MCP サーバ / MCP Server with Vanilla PHP
okashoi
1
220
Hypervel - A Coroutine Framework for Laravel Artisans
albertcht
1
110
Node-RED を(HTTP で)つなげる MCP サーバーを作ってみた
highu
0
120
Webの外へ飛び出せ NativePHPが切り拓くPHPの未来
takuyakatsusa
2
470
VS Code Update for GitHub Copilot
74th
2
590
PipeCDのプラグイン化で目指すところ
warashi
1
250
Featured
See All Featured
It's Worth the Effort
3n
185
28k
Code Reviewing Like a Champion
maltzj
524
40k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
48
5.4k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
How to Ace a Technical Interview
jacobian
277
23k
RailsConf 2023
tenderlove
30
1.1k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
A Modern Web Designer's Workflow
chriscoyier
694
190k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Build The Right Thing And Hit Your Dates
maggiecrowley
36
2.8k
Fireside Chat
paigeccino
37
3.5k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.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