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
October 25, 2023
Programming
0
340
Micro Frontends with Modern Angular
Manfred Steyer
PRO
October 25, 2023
Tweet
Share
More Decks by Manfred Steyer
See All by Manfred Steyer
Angular Architecture Workshop @AngularDays in Berlin 2025
manfredsteyer
PRO
0
5
Migration to Signals, Resource API, and NgRx Signal Store
manfredsteyer
PRO
0
84
Reactive Thinking with Signals and the Resource API
manfredsteyer
PRO
0
97
All About Angular's New Signal Forms
manfredsteyer
PRO
0
200
Your Perfect Project Setup for Angular @BASTA! 2025 in Mainz
manfredsteyer
PRO
0
210
Signals & Resource API in Angular: 3 Effective Rules for Your Architecture @BASTA 2025 in Mainz
manfredsteyer
PRO
0
140
Your Architecture as a Crime SceneForensic Analysis @BASTA! 2025 in Mainz, Germany
manfredsteyer
PRO
0
77
Your Architecture as a Crime SceneForensic Analysis @EntwicklerSummit Berlin 2025
manfredsteyer
PRO
0
47
Advanced Micro Frontends: Multi Version/ Framework Scenarios
manfredsteyer
PRO
0
410
Other Decks in Programming
See All in Programming
Goで実践するドメイン駆動開発 AIと歩み始めた新規プロダクト開発の現在地
imkaoru
4
870
Six and a half ridiculous things to do with Quarkus
hollycummins
0
200
エンジニアインターン「Treasure」とHonoの2年、そして未来へ / Our Journey with Hono Two Years at Treasure and Beyond
carta_engineering
0
380
「ちょっと古いから」って避けてた技術書、今だからこそ読もう
mottyzzz
11
6.9k
What Spring Developers Should Know About Jakarta EE
ivargrimstad
0
350
コード生成なしでモック処理を実現!ovechkin-dm/mockioで学ぶメタプログラミング
qualiarts
0
200
Claude CodeによるAI駆動開発の実践 〜そこから見えてきたこれからのプログラミング〜
iriikeita
0
310
One Enishi After Another
snoozer05
PRO
0
130
組込みだけじゃない!TinyGo で始める無料クラウド開発入門
otakakot
1
340
iOSでSVG画像を扱う
kishikawakatsumi
0
140
CSC305 Lecture 06
javiergs
PRO
0
260
PHPに関数型の魂を宿す〜PHP 8.5 で実現する堅牢なコードとは〜 #phpcon_hiroshima / phpcon-hiroshima-2025
shogogg
1
310
Featured
See All Featured
Thoughts on Productivity
jonyablonski
70
4.9k
Java REST API Framework Comparison - PWX 2021
mraible
34
8.9k
Gamification - CAS2011
davidbonilla
81
5.5k
Imperfection Machines: The Place of Print at Facebook
scottboms
269
13k
Into the Great Unknown - MozCon
thekraken
40
2.1k
What’s in a name? Adding method to the madness
productmarketing
PRO
24
3.7k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
630
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.7k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
508
140k
Reflections from 52 weeks, 52 projects
jeffersonlam
353
21k
How To Stay Up To Date on Web Technology
chriscoyier
791
250k
Building Better People: How to give real-time feedback that sticks.
wjessup
369
20k
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 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 → FMP, SEO 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