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 Modern Angular
Search
Manfred Steyer
PRO
November 09, 2023
Programming
1
610
Micro Frontends with Modern Angular
Manfred Steyer
PRO
November 09, 2023
Tweet
Share
More Decks by Manfred Steyer
See All by Manfred Steyer
Strategic Design (DDD)for the Frontend @DDD Meetup Stuttgart
manfredsteyer
PRO
0
94
Module Boundaries and Architecture with Forensic Analysis @NxSummit Amsterdam 2025
manfredsteyer
PRO
0
85
Signal-Based Data FetchingWith the New httpResource
manfredsteyer
PRO
0
160
Modern Angular:Renovation for Your Applications @angularDays 2025 Munich
manfredsteyer
PRO
0
180
Effective Signals in Angular 19+ Rules and Helpers
manfredsteyer
PRO
0
230
The Price of Micro Frontends… and Your Alternatives @bastacon 2025 in Frankfurt
manfredsteyer
PRO
0
510
Your Architecture as a Crime Scene:Forensic Analysis @bastacon 2025 in Frankfurt
manfredsteyer
PRO
0
180
Modern Angular with Signals and Signal StoreNew Rules for Your Architecture @bastacon 2025 in Frankfurt
manfredsteyer
PRO
0
230
Effective Signals in Angular 19+: Rules and Helpers
manfredsteyer
PRO
0
880
Other Decks in Programming
See All in Programming
新卒から4年間、20年もののWebサービスと 向き合って学んだソフトウェア考古学
oguri
8
7.2k
DataStoreをテストする
mkeeda
0
280
国漢文混用体からHolloまで
minhee
1
150
リストビュー画面UX改善の振り返り
splcywolf
0
120
custom_lintで始めるチームルール管理
akaboshinit
0
200
AI Coding Agent Enablement - エージェントを自走させよう
yukukotani
13
5.7k
AIコーディングワークフローの試行 〜AIエージェント×ワークフローでの自動化を目指して〜
rkaga
2
3.3k
SQL Server ベクトル検索
odashinsuke
0
160
海外のアプリで見かけたかっこいいTransitionを真似てみる
shogotakasaki
1
160
Do Dumb Things
mitsuhiko
0
410
Agentic Applications with Symfony
el_stoffel
2
270
Bedrock×MCPで社内ブログ執筆文化を育てたい!
har1101
6
810
Featured
See All Featured
Rails Girls Zürich Keynote
gr2m
94
13k
Optimizing for Happiness
mojombo
377
70k
Docker and Python
trallard
44
3.3k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
21k
Gamification - CAS2011
davidbonilla
81
5.2k
Testing 201, or: Great Expectations
jmmastey
42
7.4k
Become a Pro
speakerdeck
PRO
27
5.3k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
13
1.4k
Reflections from 52 weeks, 52 projects
jeffersonlam
349
20k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
RailsConf 2023
tenderlove
30
1.1k
Transcript
@ManfredSteyer Micro Frontends with Modern Angular ManfredSteyer
@ManfredSteyer Angular is changing …
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer Federation & Standalone & esbuild Frankenstein w/ Angular Elements
Deferred Loading SSR & Hydration w/ @angular/ssr
@ManfredSteyer Manfred Steyer
@ManfredSteyer
@ManfredSteyer Booking App Check-in App Boarding App Luggage App
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer const Component = await import('other-app/xyz')
@ManfredSteyer const Component = await import('other-app/xyz')
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer Mindset: Module Federation EcmaScript Modules Import Maps Simple config,
sharing libs
@ManfredSteyer
@ManfredSteyer 1. ng add @angular-architects/native-federation […] 2. Adjust generated config
3. Start Shell and Micro Frontends
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer Wrap them into Web Components Angular App (MFE) React
App (MFE)
@ManfredSteyer → npm install @angular/elements
@ManfredSteyer → // bootstrap.ts const app = await createApplication({ providers:
[], });
@ManfredSteyer → // bootstrap.ts const app = await createApplication({ providers:
[], }); const webCmp = createCustomElement(AppComponent, { injector: app.injector, });
@ManfredSteyer → // bootstrap.ts const app = await createApplication({ providers:
[], }); const webCmp = createCustomElement(AppComponent, { injector: app.injector, }); customElements.define('mfe2-root', webCmp);
@ManfredSteyer → // bootstrap.ts const app = await createApplication({ providers:
[], }); const webCmp = createCustomElement(AppComponent, { injector: app.injector, }); customElements.define('mfe2-root', webCmp); // Usage: <mfe2-root></mfe2-root>
@ManfredSteyer // federation.config.js module.exports = withNativeFederation({ […] exposes: { './web-comp':
'./projects/mfe2/src/bootstrap.ts', }, […] });
@ManfredSteyer
@ManfredSteyer await loadRemoteModule('other-app', './web-cmp');
@ManfredSteyer await loadRemoteModule('other-app', './web-cmp'); const rootElm = document.createElement('mfe2-root'); document.body.appendChild(rootElm);
@ManfredSteyer await loadRemoteModule('other-app', './web-cmp'); const rootElm = document.createElement('web-cmp') document.body.appendChild(rootElm); WrapperComponent
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer Title Content Call to Action Info More Info
@ManfredSteyer @defer on viewport { @main { <heavy-cmp /> }
@placeholder { <img src="ph.png"> } […] }
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer 1. Server: Render index.html 2. Client: Make app interactive
(Hydration)
@ManfredSteyer ng add @angular/ssr - or - ng new --ssr
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer Host Remote Remote HTML HTML
@ManfredSteyer 1. Server: Load HTML Fragments from MF 2. Client:
Load MF via Federation (Hydration)
@ManfredSteyer Easy No Version Conflicts Lot of Experience
@ManfredSteyer
@ManfredSteyer ng add @angular/ssr ng add @angular-architects/native-federation …
@ManfredSteyer ng g @angular-architects/native-federation:remove … ng add @angular/ssr ng add
@angular-architects/native-federation …
@ManfredSteyer
@ManfredSteyer SPA + SSR Classic SPA Complexity Complexity Monolith MF
Frankenstein Biz Apps B2C Team Autonomy →
@ManfredSteyer
@ManfredSteyer Free eBook (5th Edition) ANGULARarchitects.io/book Module Federation & Nx
@ManfredSteyer Module Federation: Mental Model rocks! Native Federation Deferred Loading
SSR with HTML Fragments
@ManfredSteyer d Slides & Examples Remote Company Workshops and Consulting
http://angulararchitects.io