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 Microfrontend Revolution: Module Federation with Angular
Search
Manfred Steyer
PRO
March 25, 2021
Programming
2
410
The Microfrontend Revolution: Module Federation with Angular
Manfred Steyer
PRO
March 25, 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
PHP8の機能を使って堅牢にコードを書く
fendo181
6
2k
Microsoft Fabricを7ヶ月使ってわかったこと
shun_oshidari
2
450
Cloudflare Workersの環境を再現することについて
yusukebe
5
730
とにかくHTTP3をライトニングに話す / Anyway, I'll talk to Lightning about HTTP3.
seike460
PRO
0
110
document.write再考
brn
5
1.9k
Laravel標準バリデーションでできること
hmb_ok
1
330
Learning PHP and Static Analysis with PHP Parser
inouehi
1
220
Static Analysis Automation for Hunting Vulnerable Kernel Drivers
takahiro_haruyama
1
1.4k
UnityプログラミングバイブルR6号宣伝&Unity Logging小話
adarapata
0
110
Catch Up with Swift 5.10
ojun9
1
450
PHPアプリケーションのスケーラビリティと 信頼性を革新する nginx+ngx_mrubyとGoの融合
pyama86
2
220
Crafting a Own PHP - ウキウキ手作りミニマリストPHP
uzulla
4
960
Featured
See All Featured
Art, The Web, and Tiny UX
lynnandtonic
288
19k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
11
1.4k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
8
8.2k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
34
8.8k
Become a Pro
speakerdeck
PRO
8
4.2k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
240
1.2M
Building Your Own Lightsaber
phodgson
97
5.6k
Making Projects Easy
brettharned
106
5.4k
The Cost Of JavaScript in 2023
addyosmani
13
3.7k
Done Done
chrislema
178
15k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
124
32k
Building Effective Engineering Teams - LeadDev
addyosmani
25
1.6k
Transcript
@ManfredSteyer ManfredSteyer The Microfrontend Revolution: Module Federation with Angular Manfred
Steyer, ANGULARarchitects.io
@ManfredSteyer
@ManfredSteyer Micro Frontends
@ManfredSteyer
@ManfredSteyer Contents #1: Module Federation #2: Version Mismatches #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 ?
@ManfredSteyer Custom Builder
@ManfredSteyer
@ManfredSteyer 1) ng add @angular-architects/module-federation 2) Adjust generated configuration 3)
ng serve
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer When can we have it? Webpack 5 and Module
Federation: final Angular CLI 11: Experimental Opt-in for webpack 5 Angular CLI 12: Official webpack 5 integration
@ManfredSteyer Free eBook ANGULARarchitects.io/book Updated for Module Federation and Alternatives
@ManfredSteyer Conclusion Module Federation Loading Separately Deployed Code Micro Frontends
Federated Angular
@ManfredSteyer d Slides & Examples Remote Company Workshops and Consulting
http://angulararchitects.io