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 in Angul...
Search
Manfred Steyer
PRO
May 12, 2021
Programming
2
6.3k
Micro Frontends with Module Federation in Angular 12
Manfred Steyer
PRO
May 12, 2021
Tweet
Share
More Decks by Manfred Steyer
See All by Manfred Steyer
The Price of Micro Frontends… and Your Alternatives @bastacon 2025 in Frankfurt
manfredsteyer
PRO
0
14
Your Architecture as a Crime Scene:Forensic Analysis @bastacon 2025 in Frankfurt
manfredsteyer
PRO
0
14
Modern Angular with Signals and Signal StoreNew Rules for Your Architecture @bastacon 2025 in Frankfurt
manfredsteyer
PRO
0
3
Effective Signals in Angular 19+: Rules and Helpers
manfredsteyer
PRO
0
840
Effective Signals in Angular 19+: Rules and Helpers @ngbe2024
manfredsteyer
PRO
0
470
Your Architecture as a Crime Scene: Improvements with Forensic Analysis
manfredsteyer
PRO
0
24
Micro Frontends Unmasked Opportunities, Challenges, Alternatives
manfredsteyer
PRO
0
440
3 Effective Rules for Using Signals in Angular
manfredsteyer
PRO
0
280
Your Architecture as a Crime Scene: Improvements with Forensic Analysis @ijs Munich 2024
manfredsteyer
PRO
0
380
Other Decks in Programming
See All in Programming
Ruby on cygwin 2025-02
fd0
0
180
『テスト書いた方が開発が早いじゃん』を解き明かす #phpcon_nagoya
o0h
PRO
8
2.4k
CSS Linter による Baseline サポートの仕組み
ryo_manba
1
150
密集、ドキュメントのコロケーション with AWS Lambda
satoshi256kbyte
1
210
Django NinjaによるAPI開発の効率化とリプレースの実践
kashewnuts
1
250
SwiftUI Viewの責務分離
elmetal
PRO
2
270
Introduction to kotlinx.rpc
arawn
0
770
一休.com のログイン体験を支える技術 〜Web Components x Vue.js 活用事例と最適化について〜
atsumim
0
990
Ça bouge du côté des animations CSS !
goetter
2
150
Djangoアプリケーション 運用のリアル 〜問題発生から可視化、最適化への道〜 #pyconshizu
kashewnuts
1
260
もう少しテストを書きたいんじゃ〜 #phpstudy
o0h
PRO
17
4k
Honoのおもしろいミドルウェアをみてみよう
yusukebe
1
230
Featured
See All Featured
The Language of Interfaces
destraynor
156
24k
What's in a price? How to price your products and services
michaelherold
244
12k
Product Roadmaps are Hard
iamctodd
PRO
50
11k
Music & Morning Musume
bryan
46
6.4k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
Typedesign – Prime Four
hannesfritz
40
2.5k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
33
2.8k
Rails Girls Zürich Keynote
gr2m
94
13k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Large-scale JavaScript Application Architecture
addyosmani
511
110k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
175
52k
Optimizing for Happiness
mojombo
376
70k
Transcript
@ManfredSteyer ManfredSteyer Micro Frontends with Module Federation in Angular 12
Manfred Steyer, ANGULARarchitects.io
@ManfredSteyer Contents #1: Module Federation 101 #2: What's new for
MF & Angular 12 #3: Future Features
@ManfredSteyer Manfred Steyer
@ManfredSteyer
@ManfredSteyer Micro Frontends
@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 1) ng add @angular-architects/module-federation 2) Adjust generated configuration 3)
ng serve
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer Webpack 5 is Backed Into CLI 12 No need
for forcing the CLI into webpack 5 anymore: "resolutions": { "webpack": "^5.0.0" }, Feel free to use yarn or npm
@ManfredSteyer Better Monorepo Support Share like npm package
@ManfredSteyer Big Thanks to Webpack's Tobias Koppers
@ManfredSteyer Better Monorepo Support Migrate from Angular 11? Have a
look on how we generate the webpack.config.js in Version 12
@ManfredSteyer npm run run:all
@ManfredSteyer Booking Booking Boarding Boarding Shared Shared Feature Feature Feature
Feature Feature Feature Feature Feature Feature Feature … … … … … … … … … … … … … … … … … … Booking App Booking App Boarding App Boarding App Btw: Also Works Perfectly w/ Multiple Repos Repository n Repository 2 Repository 1
@ManfredSteyer Tutorial is Updated https://www.npmjs.com/package/@angular-architects/module-federation
@ManfredSteyer Make sure you use Version ^12 for Angular 12!
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer Evolution, not Revolution! Keep Track with upcoming Angular CLI
versions Small Features to automate repetitive tasks
@ManfredSteyer Free eBook ANGULARarchitects.io/book Updated for Module Federation and Alternatives
@ManfredSteyer Conclusion Loading Separately Deployed Code Better Monorepo Support Multi
Repos supported too! run:all More to come!
@ManfredSteyer d Slides & Examples Remote Company Workshops and Consulting
http://angulararchitects.io