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
manfredsteyer
PRO
0
350
Advanced Micro Frontends: Multi Version/ Framework Scenarios @WAD 2025, Berlin
manfredsteyer
PRO
0
620
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
500
The Missing Link in Angular‘s Signal Story Resource API and httpResource @ngRome 2025
manfredsteyer
PRO
0
160
Your Architecture as a Crime Scene:Forensic Analysis
manfredsteyer
PRO
0
230
Rethinking Data Access: The New httpResource in Angular
manfredsteyer
PRO
0
360
Reactive Thinking with Signals, Resource API, and httpResource @Devm.io Angular 20 Launch Party
manfredsteyer
PRO
0
240
JavaScript as a Crime SceneForensic Analysis
manfredsteyer
PRO
0
130
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @jax2025 in Mainz, Germany
manfredsteyer
PRO
0
230
Other Decks in Programming
See All in Programming
ProxyによるWindow間RPC機構の構築
syumai
3
1.2k
AIでLINEスタンプを作ってみた
eycjur
1
230
Introducing ReActionView: A new ActionView-compatible ERB Engine @ Rails World 2025, Amsterdam
marcoroth
0
710
Laravel Boost 超入門
fire_arlo
3
220
パッケージ設計の黒魔術/Kyoto.go#63
lufia
3
440
もうちょっといいRubyプロファイラを作りたい (2025)
osyoyu
1
450
AIを活用し、今後に備えるための技術知識 / Basic Knowledge to Utilize AI
kishida
22
5.9k
Cache Me If You Can
ryunen344
2
3k
「手軽で便利」に潜む罠。 Popover API を WCAG 2.2の視点で安全に使うには
taitotnk
0
870
Oracle Database Technology Night 92 Database Connection control FAN-AC
oracle4engineer
PRO
1
470
スケールする組織の実現に向けた インナーソース育成術 - ISGT2025
teamlab
PRO
1
160
「待たせ上手」なスケルトンスクリーン、 そのUXの裏側
teamlab
PRO
0
560
Featured
See All Featured
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.5k
Making the Leap to Tech Lead
cromwellryan
135
9.5k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
131
19k
The Art of Programming - Codeland 2020
erikaheidi
56
13k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.7k
Building an army of robots
kneath
306
46k
Large-scale JavaScript Application Architecture
addyosmani
513
110k
How GitHub (no longer) Works
holman
315
140k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
358
30k
How to Ace a Technical Interview
jacobian
279
23k
jQuery: Nuts, Bolts and Bling
dougneiner
64
7.9k
Testing 201, or: Great Expectations
jmmastey
45
7.7k
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