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
The Microfrontend Revolution: Module Federatio...
Search
Manfred Steyer
PRO
March 25, 2021
Programming
2
420
The Microfrontend Revolution: Module Federation with Angular
Manfred Steyer
PRO
March 25, 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
60
Your Architecture as a Crime Scene:Forensic Analysis @bastacon 2025 in Frankfurt
manfredsteyer
PRO
0
99
Modern Angular with Signals and Signal StoreNew Rules for Your Architecture @bastacon 2025 in Frankfurt
manfredsteyer
PRO
0
79
Effective Signals in Angular 19+: Rules and Helpers
manfredsteyer
PRO
0
840
Effective Signals in Angular 19+: Rules and Helpers @ngbe2024
manfredsteyer
PRO
0
480
Your Architecture as a Crime Scene: Improvements with Forensic Analysis
manfredsteyer
PRO
0
26
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
390
Other Decks in Programming
See All in Programming
Kotlinの開発でも AIをいい感じに使いたい / Making the Most of AI in Kotlin Development
kohii00
5
1.8k
はじめての Go * WASM * OCR
sgash708
1
120
Datadog DBMでなにができる? JDDUG Meetup#7
nealle
0
160
.NET Frameworkでも汎用ホストが使いたい!
tomokusaba
0
210
PHPのバージョンアップ時にも役立ったAST
matsuo_atsushi
0
230
技術を改善し続ける
gumioji
0
180
CloudNativePGを布教したい
nnaka2992
0
120
複数のAWSアカウントから横断で 利用する Lambda Authorizer の作り方
tc3jp
0
120
自力でTTSモデルを作った話
zgock999
0
120
DevNexus - Create AI Infused Java Apps with LangChain4j
kdubois
0
130
kintone開発を効率化するためにチームで試した施策とその結果を大放出!
oguemon
0
330
コミュニティ駆動 AWS CDK ライブラリ「Open Constructs Library」 / community-cdk-library
gotok365
2
260
Featured
See All Featured
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
30
2.3k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
6
580
The Power of CSS Pseudo Elements
geoffreycrofte
75
5.5k
The World Runs on Bad Software
bkeepers
PRO
67
11k
How to train your dragon (web standard)
notwaldorf
91
5.9k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.2k
Thoughts on Productivity
jonyablonski
69
4.5k
RailsConf 2023
tenderlove
29
1k
Docker and Python
trallard
44
3.3k
Producing Creativity
orderedlist
PRO
344
40k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
7.1k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
13
1k
Transcript
@ManfredSteyer ManfredSteyer The Microfrontend Revolution: Module Federation with Angular Manfred
Steyer, ANGULARarchitects.io
@ManfredSteyer
@ManfredSteyer Micro Frontends
@ManfredSteyer
@ManfredSteyer Contents #1: Module Federation #2: Version Mismatches #3: Federated
Angular #4: 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