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 Module Federation @HubsWebConf 2022
Search
Manfred Steyer
PRO
March 30, 2022
Programming
0
280
Micro Frontends with Module Federation @HubsWebConf 2022
Manfred Steyer
PRO
March 30, 2022
Tweet
Share
More Decks by Manfred Steyer
See All by Manfred Steyer
The New NGRX Signal Store for Angular: 3+n Flavors of the Signal Store
manfredsteyer
PRO
0
2
Micro Frontends with Modern Angular and Island Architectures @ijs London 2024
manfredsteyer
PRO
0
76
Modern State Management in Angular: 3+n Flavors of the Signal Store @ijs London 2024
manfredsteyer
PRO
0
75
Changed Rules: Architectures with Lightweight Stores
manfredsteyer
PRO
0
240
Migrating to Signals: A Practical Workshop
manfredsteyer
PRO
0
410
Micro Frontends with Web Standards
manfredsteyer
PRO
1
290
The New NGRX Signal Store for Angular: 3+n Flavors
manfredsteyer
PRO
1
220
Leveraging the new NGRX Signal Store
manfredsteyer
PRO
0
170
Modern State Management in Angular: The 3+n Flavors of the NGRX Signal Store
manfredsteyer
PRO
0
110
Other Decks in Programming
See All in Programming
チーム力を高めるスクラム実践法:カンバン公開と課題攻略について - ニフティのスクラムトーク Vol. 2 - NIFTY Tech Talk #18
niftycorp
PRO
1
110
VS Code をプロダクトにどう取り込むか
onomax
1
350
What We Can Learn From OSS
inouehi
0
420
OpenAPIを中心に考えるAPI開発入門 / Introduction to API Development with a Focus on OpenAPI
seike460
PRO
2
160
TYPO3 v13 – The road to LTS: What's new and new APIs
luisasofie_xoxo
0
190
Git Rebase
bkuhlmann
11
1.6k
코틀린으로 멀티플랫폼 만들기
pangmoo
0
140
CQRS/ES avec Symfony, c’est (trop) bien !
jeremyfreeagent
1
640
Ruby GitHub Packages
bkuhlmann
0
630
PHPはいつから死んでいるかの調査
chiroruxx
1
370
HUIT新歓2024「競技プログラミング、やってみませんか?」
slephy2784
1
260
Micro Frontends for Java Microservices - Devnexus 2024
mraible
PRO
0
480
Featured
See All Featured
Fashionably flexible responsive web design (full day workshop)
malarkey
398
65k
The Art of Programming - Codeland 2020
erikaheidi
41
12k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
16
1.4k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
18
6.9k
StorybookのUI Testing Handbookを読んだ
zakiyama
12
4.6k
Building Your Own Lightsaber
phodgson
98
5.7k
The Mythical Team-Month
searls
215
42k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
243
20k
Designing for humans not robots
tammielis
248
25k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
60
14k
Building a Modern Day E-commerce SEO Strategy
aleyda
16
6.4k
Happy Clients
brianwarren
91
6.4k
Transcript
@ManfredSteyer ManfredSteyer The Micro Frontend Revolution: Angular and Module Federation
Manfred Steyer, ANGULARarchitects.io
@ManfredSteyer
@ManfredSteyer Booking App Booking App Check-in App Check-in App Boarding
App Boarding App Luggage App Luggage App Micro Frontends
@ManfredSteyer
@ManfredSteyer Micro Frontends
@ManfredSteyer
@ManfredSteyer Contents #1: Module Federation #2 Version Mismatch #3: Federated
Angular
@ManfredSteyer Manfred Steyer
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer Idea const Component = await import('http://other-app/xyz') Does not work
with webpack/ Angular CLI Even lazy parts must be known at compile time!
@ManfredSteyer Webpack 5 Module Federation Shell (Host) Microfrontend (Remote) //
Maps Urls in // webpack config remotes: { mfe1: "mfe1" } // Expose files in // webpack config exposes: { './Cmp': './my.cmp.ts' } import('mfe1/Cmp')
@ManfredSteyer How to Get the Microfrontend's URL? Shell (Host) Microfrontend
(Remote) RemoteEntry.js <script src="…"></script>
@ManfredSteyer How to Share Libs? Shell (Host) Microfrontend (Remote) shared:
[ "@angular/core", "…" ] shared: [ "@angular/core", "…" ]
@ManfredSteyer
@ManfredSteyer ?
@ManfredSteyer Custom Builder
@ManfredSteyer
@ManfredSteyer 1) ng add @angular-architects/module-federation 2) Adjust generated configuration 3)
ng serve
@ManfredSteyer
@ManfredSteyer Free eBook ANGULARarchitects.io/book Updated for Module Federation and Alternatives
@ManfredSteyer Conclusion Module Federation Loading Separately Deployed Code Version Mismatches
Federated Angular
@ManfredSteyer
@ManfredSteyer d Slides & Examples Remote Company Workshops and Consulting
http://angulararchitects.io