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
Strategic Design (DDD)for the Frontend @DDD Meetup Stuttgart
manfredsteyer
PRO
0
53
Module Boundaries and Architecture with Forensic Analysis @NxSummit Amsterdam 2025
manfredsteyer
PRO
0
66
Signal-Based Data FetchingWith the New httpResource
manfredsteyer
PRO
0
130
Modern Angular:Renovation for Your Applications @angularDays 2025 Munich
manfredsteyer
PRO
0
160
Effective Signals in Angular 19+ Rules and Helpers
manfredsteyer
PRO
0
220
The Price of Micro Frontends… and Your Alternatives @bastacon 2025 in Frankfurt
manfredsteyer
PRO
0
500
Your Architecture as a Crime Scene:Forensic Analysis @bastacon 2025 in Frankfurt
manfredsteyer
PRO
0
180
Modern Angular with Signals and Signal StoreNew Rules for Your Architecture @bastacon 2025 in Frankfurt
manfredsteyer
PRO
0
230
Effective Signals in Angular 19+: Rules and Helpers
manfredsteyer
PRO
0
880
Other Decks in Programming
See All in Programming
ベクトル検索システムの気持ち
monochromegane
30
9.6k
AIコードエディタの基盤となるLLMのFlutter性能評価
alquist4121
0
180
AHC045_解説
shun_pi
0
340
Denoでフロントエンド開発 2025年春版 / Frontend Development with Deno (Spring 2025)
petamoriken
1
1.3k
Java 24まとめ / Java 24 summary
kishida
3
280
Develop Faster With FrankenPHP
dunglas
2
3k
パスキーのすべて / 20250324 iddance Lesson.5
kuralab
0
140
趣味全開のAITuber開発
kokushin
0
180
Kamal 2 – Get Out of the Cloud
aleksandrov
1
150
Windows版PHPのビルド手順とPHP 8.4における変更点
matsuo_atsushi
0
390
自分のために作ったアプリが、グローバルに使われるまで / Indie App Development Lunch LT
pixyzehn
1
140
AWS で実現する安全な AI エージェントの作り方 〜 Bedrock Engineer の実装例を添えて 〜 / how-to-build-secure-ai-agents
gawa
2
120
Featured
See All Featured
Java REST API Framework Comparison - PWX 2021
mraible
29
8.5k
Statistics for Hackers
jakevdp
798
220k
Mobile First: as difficult as doing things right
swwweet
223
9.5k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.2k
Music & Morning Musume
bryan
46
6.4k
Embracing the Ebb and Flow
colly
85
4.6k
Fireside Chat
paigeccino
37
3.4k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
30k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
28
1.6k
StorybookのUI Testing Handbookを読んだ
zakiyama
28
5.6k
Producing Creativity
orderedlist
PRO
344
40k
Done Done
chrislema
183
16k
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