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
Advanced Micro Frontends: Multi Version/ Framework Scenarios @WAD 2025, Berlin
manfredsteyer
PRO
0
14
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
210
The Missing Link in Angular‘s Signal Story Resource API and httpResource @ngRome 2025
manfredsteyer
PRO
0
82
Your Architecture as a Crime Scene:Forensic Analysis
manfredsteyer
PRO
0
150
Rethinking Data Access: The New httpResource in Angular
manfredsteyer
PRO
0
300
Reactive Thinking with Signals, Resource API, and httpResource @Devm.io Angular 20 Launch Party
manfredsteyer
PRO
0
190
JavaScript as a Crime SceneForensic Analysis
manfredsteyer
PRO
0
92
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @jax2025 in Mainz, Germany
manfredsteyer
PRO
0
170
Premier Disciplin for Micro Frontends Multi Version/ Framework Scenarios
manfredsteyer
PRO
0
100
Other Decks in Programming
See All in Programming
Webの外へ飛び出せ NativePHPが切り拓くPHPの未来
takuyakatsusa
2
540
20250704_教育事業におけるアジャイルなデータ基盤構築
hanon52_
5
760
PostgreSQLのRow Level SecurityをPHPのORMで扱う Eloquent vs Doctrine #phpcon #track2
77web
2
510
効率的な開発手段として VRTを活用する
ishkawa
0
130
iOS 26にアップデートすると実機でのHot Reloadができない?
umigishiaoi
0
130
PHPで始める振る舞い駆動開発(Behaviour-Driven Development)
ohmori_yusuke
2
360
チームで開発し事業を加速するための"良い"設計の考え方 @ サポーターズCoLab 2025-07-08
agatan
1
360
AI時代のソフトウェア開発を考える(2025/07版) / Agentic Software Engineering Findy 2025-07 Edition
twada
PRO
80
26k
20250628_非エンジニアがバイブコーディングしてみた
ponponmikankan
0
670
たった 1 枚の PHP ファイルで実装する MCP サーバ / MCP Server with Vanilla PHP
okashoi
1
240
ペアプロ × 生成AI 現場での実践と課題について / generative-ai-in-pair-programming
codmoninc
1
16k
Composerが「依存解決」のためにどんな工夫をしているか #phpcon
o0h
PRO
1
250
Featured
See All Featured
Optimising Largest Contentful Paint
csswizardry
37
3.3k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
The Invisible Side of Design
smashingmag
301
51k
Art, The Web, and Tiny UX
lynnandtonic
299
21k
Visualization
eitanlees
146
16k
How GitHub (no longer) Works
holman
314
140k
Unsuck your backbone
ammeep
671
58k
Adopting Sorbet at Scale
ufuk
77
9.4k
The Language of Interfaces
destraynor
158
25k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
680
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Music & Morning Musume
bryan
46
6.6k
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