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
The Micro Frontend Revolution: Module Federation with Angular @JAX 2021
Search
Manfred Steyer
PRO
May 05, 2021
Programming
1
330
The Micro Frontend Revolution: Module Federation with Angular @JAX 2021
Manfred Steyer
PRO
May 05, 2021
Tweet
Share
More Decks by Manfred Steyer
See All by Manfred Steyer
Micro Frontends with Web Standards
manfredsteyer
PRO
0
190
The New NGRX Signal Store for Angular: 3+n Flavors
manfredsteyer
PRO
1
160
Leveraging the new NGRX Signal Store
manfredsteyer
PRO
0
140
Modern State Management in Angular: The 3+n Flavors of the NGRX Signal Store
manfredsteyer
PRO
0
92
NGRX Signal Store
manfredsteyer
PRO
0
180
signals-arc.pdf
manfredsteyer
PRO
0
220
Camel and Eye of a Needle: Integration of SPA-based Micro Frontends
manfredsteyer
PRO
0
89
Micro Frontends with Modern Angular
manfredsteyer
PRO
1
470
Angular Architectures with Signals
manfredsteyer
PRO
2
600
Other Decks in Programming
See All in Programming
Cloud RunとCloud PubSubでサーバレスなデータ基盤2024 with Terraform / Cloud Run and PubSub with Terraform
shinyorke
7
1.7k
Jakarta EE 11 - Performance and Developer Productivity
ivargrimstad
0
840
GitHub Copilot Tips and Tricks
yuichielectric
2
240
まっちすいっち戦争 / match vs switch
takuyakatsusa
1
620
Vue 3.4
kazupon
12
3.5k
Laravel OpenAPIによる"辛くない"スキーマ駆動開発
kentaroutakeda
2
1.4k
CSRF対策のやり方、そろそろアップデートしませんか / Update your knowledge of CSRF protection
hiro_y
22
12k
TDDと今まで
kanayannet
0
110
Material 3で Material 2ぽい見た目にする
numeroanddev
2
220
decksh - a little language for decks
ajstarks
4
18k
品質が高いコードって何?Rev2.1
ickx
1
370
Cloudflare Workersの環境を再現することについて
yusukebe
5
720
Featured
See All Featured
Designing on Purpose - Digital PM Summit 2013
jponch
109
6.4k
How GitHub (no longer) Works
holman
301
140k
Bash Introduction
62gerente
604
210k
A Philosophy of Restraint
colly
195
15k
Building Effective Engineering Teams - LeadDev
addyosmani
25
1.6k
How GitHub Uses GitHub to Build GitHub
holman
467
290k
Optimizing for Happiness
mojombo
369
69k
What the flash - Photography Introduction
edds
64
11k
A better future with KSS
kneath
230
16k
Principles of Awesome APIs and How to Build Them.
keavy
119
16k
Building Better People: How to give real-time feedback that sticks.
wjessup
350
18k
Rebuilding a faster, lazier Slack
samanthasiow
72
8.1k
Transcript
@ManfredSteyer ManfredSteyer The Micro Frontend Revolution: Module Federation with Angular
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 #4: Possible Roadmap
@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 Default Behavior Selecting the highest compatible version 10.0 10.1
@ManfredSteyer Default Behavior Conflict: No highest compatible version 11.0 10.1
@ManfredSteyer Example • Shell: my-lib: ^10.0 • MFE1: my-lib: ^10.1
• MFE2: my-lib: ^9.0 • MFE3: my-lib: ^9.1 Result: • Shell and MFE1 share ^10.1 • MFE2 and MFE3 share ^9.1
@ManfredSteyer Configuring Singletons shared: { "my-lib": { singleton: true }
} 11.0 10.1
@ManfredSteyer Configuring Singletons shared: { "my-lib": { singleton: true, strictVersion:
true // Error instead of warning! } } 11.0 10.1
@ManfredSteyer Relaxing Version Requirements shared: { "my-lib": { requiredVersion: ">=1.0.1
<11.1.1" } }
@ManfredSteyer
@ManfredSteyer ?
@ManfredSteyer Custom Builder
@ManfredSteyer
@ManfredSteyer 1) ng add @angular-architects/module-federation 2) Adjust generated configuration 3)
ng serve
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer Well … Webpack 5: final @angular-architects/module-federation: final CLI 12:
Official webpack 5 support (May 2021)
@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