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
Federated Angular: Micro Frontends with Module ...
Search
Manfred Steyer
PRO
February 25, 2021
Programming
0
750
Federated Angular: Micro Frontends with Module Federation @jsWorld 2021
Manfred Steyer
PRO
February 25, 2021
Tweet
Share
More Decks by Manfred Steyer
See All by Manfred Steyer
Advanced Micro Frontends: Multi Version/ Framework Scenarios
manfredsteyer
PRO
0
300
Advanced Micro Frontends: Multi Version/ Framework Scenarios @WAD 2025, Berlin
manfredsteyer
PRO
0
610
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
470
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
220
Rethinking Data Access: The New httpResource in Angular
manfredsteyer
PRO
0
350
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
220
Other Decks in Programming
See All in Programming
Laravel Boost 超入門
fire_arlo
2
170
テストカバレッジ100%を10年続けて得られた学びと品質
mottyzzz
2
410
AI OCR API on Lambdaを Datadogで可視化してみた
nealle
0
220
Rancher と Terraform
fufuhu
2
170
AIを活用し、今後に備えるための技術知識 / Basic Knowledge to Utilize AI
kishida
14
3.6k
CloudflareのChat Agent Starter Kitで簡単!AIチャットボット構築
syumai
1
290
TanStack DB ~状態管理の新しい考え方~
bmthd
2
370
CSC305 Summer Lecture 12
javiergs
PRO
0
130
旅行プランAIエージェント開発の裏側
ippo012
1
590
Namespace and Its Future
tagomoris
6
680
Ruby Parser progress report 2025
yui_knk
1
260
オープンセミナー2025@広島LT技術ブログを続けるには
satoshi256kbyte
0
150
Featured
See All Featured
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
570
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Site-Speed That Sticks
csswizardry
10
800
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
51
5.6k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
790
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Writing Fast Ruby
sferik
628
62k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.9k
jQuery: Nuts, Bolts and Bling
dougneiner
64
7.9k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
RailsConf 2023
tenderlove
30
1.2k
Transcript
@ManfredSteyer ManfredSteyer Federated Angular: Micro Frontends with Module Federation Manfred
Steyer, ANGULARarchitects.io
@ManfredSteyer
@ManfredSteyer Micro Frontends
@ManfredSteyer
@ManfredSteyer Contents #1: Module Federation #2 Federated Angular #3: 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