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
310
Micro Frontends with Modern Angular
Manfred Steyer
PRO
October 25, 2023
Tweet
Share
More Decks by Manfred Steyer
See All by Manfred Steyer
Effective Signals in Angular 19+: Rules and Helpers
manfredsteyer
PRO
0
560
Effective Signals in Angular 19+: Rules and Helpers @ngbe2024
manfredsteyer
PRO
0
330
Your Architecture as a Crime Scene: Improvements with Forensic Analysis
manfredsteyer
PRO
0
19
Micro Frontends Unmasked Opportunities, Challenges, Alternatives
manfredsteyer
PRO
0
370
3 Effective Rules for Using Signals in Angular
manfredsteyer
PRO
0
250
Your Architecture as a Crime Scene: Improvements with Forensic Analysis @ijs Munich 2024
manfredsteyer
PRO
0
290
3 Effective Rules for Using Signals in Angular
manfredsteyer
PRO
0
160
Micro Frontends Unmasked: Opportunities, Challenges, Alternatives @w-jax 2024 München
manfredsteyer
PRO
0
160
3 Effective Rules for Using Signals in Angular
manfredsteyer
PRO
1
170
Other Decks in Programming
See All in Programming
traP の部内 ISUCON とそれを支えるポータル / PISCON Portal
ikura_hamu
0
230
shadcn/uiを使ってReactでの開発を加速させよう!
lef237
0
390
Pythonでもちょっとリッチな見た目のアプリを設計してみる
ueponx
0
230
SRE、開発、QAが協業して挑んだリリースプロセス改革@SRE Kaigi 2025
nealle
1
3.3k
富山発の個人開発サービスで日本中の学校の業務を改善した話
krpk1900
3
310
自分ひとりから始められる生産性向上の取り組み #でぃーぷらすオオサカ
irof
8
2.2k
ASP. NET CoreにおけるWebAPIの最新情報
tomokusaba
0
220
watsonx.ai Dojo #6 継続的なAIアプリ開発と展開
oniak3ibm
PRO
0
270
オニオンアーキテクチャを使って、 Unityと.NETでコードを共有する
soi013
0
390
Java Webフレームワークの現状 / java web framework at burikaigi
kishida
9
2k
SpringBoot3.4の構造化ログ #kanjava
irof
2
780
ISUCON14公式反省会LT: 社内ISUCONの話
astj
PRO
0
140
Featured
See All Featured
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
44
9.4k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
232
17k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.6k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
3
270
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
98
18k
A Philosophy of Restraint
colly
203
16k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
27
1.9k
RailsConf 2023
tenderlove
29
980
Dealing with People You Can't Stand - Big Design 2015
cassininazir
365
25k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
127
19k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
Designing for Performance
lara
604
68k
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