Upgrade to Pro — share decks privately, control downloads, hide ads and more …

The Microfrontend Revolution: Module Federation...

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for Manfred Steyer Manfred Steyer PRO
April 14, 2021
Programming
1
490

The Microfrontend Revolution: Module Federation with Angular @μCon 2021

Avatar for Manfred Steyer

Manfred Steyer PRO

April 14, 2021
Tweet

More Decks by Manfred Steyer

See All by Manfred Steyer
Premier Disciplin for Micro Frontends Multi Version/ Framework Scenarios @OOP 2026, Munic
Avatar for Manfred Steyer manfredsteyer
PRO
0
97
Beyond the Basics: Signal Forms
Avatar for Manfred Steyer manfredsteyer
PRO
0
63
360° Signals in Angular: Signal Forms with SignalStore & Resources @ngLondon 01/2026
Avatar for Manfred Steyer manfredsteyer
PRO
0
140
All About Angular‘s New Signal Forms
Avatar for Manfred Steyer manfredsteyer
PRO
0
29
Full-Cycle Reactivity in Angular: SignalStore mit Signal Forms und Resources
Avatar for Manfred Steyer manfredsteyer
PRO
0
260
Your Architecture as a Crime Scene? Forensic Analysis
Avatar for Manfred Steyer manfredsteyer
PRO
0
180
Full-Cycle Reactivity in Angular: SignalStore mit Signal Forms und Resources
Avatar for Manfred Steyer manfredsteyer
PRO
0
280
Your Architecture as a Crime Scene: Forensic Analysis
Avatar for Manfred Steyer manfredsteyer
PRO
0
130
Reactive Thinking with Signals and the new Resource API
Avatar for Manfred Steyer manfredsteyer
PRO
0
250

Other Decks in Programming

See All in Programming
Fluid Templating in TYPO3 14
Avatar for Simon Praetorius s2b
0
130
AIによる高速開発をどう制御するか？ ガードレール設置で開発速度と品質を両立させたチームの事例
Avatar for tonkotsuboy_com tonkotsuboy_com
7
2.4k
組織で育むオブザーバビリティ
Avatar for ryotaro kobayashi ryota_hnk
0
180
カスタマーサクセス業務を変革したヘルススコアの実現と学び
Avatar for Tomoyuki Hamaguchi _hummer0724
0
740
2026年 エンジニアリング自己学習法
Avatar for yumechi(Motoki Hirao) yumechi
0
140
CSC307 Lecture 06
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
690
責任感のあるCloudWatchアラームを設計しよう
Avatar for アキキー akihisaikeda
3
180
[KNOTS 2026登壇資料]AIで拡張‧交差する プロダクト開発のプロセス および携わるメンバーの役割
Avatar for hisatake hisatake
0
300
Python’s True Superpower
Avatar for Hynek Schlawack hynek
0
110
Unicodeどうしてる？ PHPから見たUnicode対応と他言語での対応についてのお伺い
Avatar for てきめん tekimen youkidearitai
PRO
1
2.6k
MDN Web Docs に日本語翻訳でコントリビュート
Avatar for uutan1108 ohmori_yusuke
0
660
AIと一緒にレガシーに向き合ってみた
Avatar for nyafunta9858 nyafunta9858
0
260

Featured

See All Featured
<Decoding/> the Language of Devs - We Love SEO 2024
Avatar for Nikki Halliwell nikkihalliwell
1
130
Collaborative Software Design: How to facilitate domain modelling decisions
Avatar for Kenny Baas-Schwegler baasie
0
140
Stewardship and Sustainability of Urban and Community Forests
Avatar for Eric Wiseman pwiseman
0
110
Impact Scores and Hybrid Strategies: The future of link building
Avatar for Tamara Novitovic tamaranovitovic
0
200
技術選定の審美眼（2025年版） / Understanding the Spiral of Technologies 2025 edition
Avatar for Takuto Wada twada
PRO
117
110k
The Invisible Side of Design
Avatar for Vitaly Friedman smashingmag
302
51k
Introduction to Domain-Driven Design and Collaborative software design
Avatar for Kenny Baas-Schwegler baasie
1
590
Fireside Chat
Avatar for paigeccino paigeccino
41
3.8k
SEO for Brand Visibility & Recognition
Avatar for Aleyda Solis aleyda
0
4.2k
Navigating the moral maze — ethical principles for Al-driven product design
Avatar for Skipper Chong Warson skipperchong
2
250
Practical Orchestrator
Avatar for Shlomi Noach shlominoach
191
11k
Understanding Cognitive Biases in Performance Measurement
Avatar for Philip Tellis bluesmoon
32
2.8k

Transcript

  1. @ManfredSteyer ManfredSteyer The Microfrontend Revolution Webpack 5 Module Federation Manfred

    Steyer, ANGULARarchitects.io

  2. @ManfredSteyer

  3. @ManfredSteyer Booking App Booking App Check-in App Check-in App Boarding

    App Boarding App Luggage App Luggage App Microfrontends

  4. @ManfredSteyer Micro Frontends

  5. @ManfredSteyer

  6. @ManfredSteyer Contents #1: Module Federation #2: Federated Angular #3: Live-Coding

    #4: Possible Roadmap

  7. @ManfredSteyer Manfred Steyer

  8. @ManfredSteyer

  9. @ManfredSteyer

  10. @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!

  11. @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')

  12. @ManfredSteyer How to Get the Microfrontend's URL? Shell (Host) Microfrontend

    (Remote) RemoteEntry.js <script src="…"></script>

  13. @ManfredSteyer How to Share Libs? Shell (Host) Microfrontend (Remote) shared:

    [ "@angular/core", "…" ] shared: [ "@angular/core", "…" ]

  14. @ManfredSteyer

  15. @ManfredSteyer ?

  16. @ManfredSteyer Custom Builder

  17. @ManfredSteyer

  18. @ManfredSteyer 1) ng add @angular-architects/module-federation 2) Adjust generated configuration 3)

    ng serve

  19. @ManfredSteyer

  20. @ManfredSteyer

  21. @ManfredSteyer When can we have it? Webpack 5 and Module

    Federation: final Angular CLI 11 + webpack 5: experimental Angular CLI 12 (May 2021): webpack 5 integrated

  22. @ManfredSteyer Free eBook Now: 3rd Edition ANGULARarchitects.io/book Updated for Module

    Federation and Alternatives (~100 pages)

  23. @ManfredSteyer Conclusion Module Federation Loading Separately Deployed Code Micro Frontends

    Federated Angular

  24. @ManfredSteyer

  25. @ManfredSteyer d Slides & Examples Remote Company Workshops and Consulting

    http://angulararchitects.io