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

Micro Frontends with Modern Angular

Manfred Steyer
PRO
October 18, 2023
0
130

Micro Frontends with Modern Angular

Manfred Steyer
PRO

October 18, 2023
Tweet

More Decks by Manfred Steyer

See All by Manfred Steyer
Modern Angular with Lightweight Stores: New Rules and Options
manfredsteyer
PRO
0
46
Successful with Signals: 3 Rules for Your Architecture
manfredsteyer
PRO
0
68
Successful with Signals: 3 Rules for Your Architecture @.NET UserGroup Bern
manfredsteyer
PRO
0
28
Improving Your Architecture with Forensic Analysis
manfredsteyer
PRO
0
70
Micro Frontends Unmasked: Opportunities, Challenges, Alternatives
manfredsteyer
PRO
0
270
Modern Angular with the NGRX Signal Store New Rules for Your Architecture @BASTA 2024 in Mainz
manfredsteyer
PRO
0
24
Modern Angular with the NGRX Signal Store New Rules for Your Architecture @BASTA! 2024 in Mainz
manfredsteyer
PRO
0
340
Successful with Signals: 3 Patterns for Your Architecture
manfredsteyer
PRO
0
94
Native Federation: The Future of Micro Frontends in Angular
manfredsteyer
PRO
0
350

Featured

See All Featured
Testing 201, or: Great Expectations
jmmastey
38
7k
Fontdeck: Realign not Redesign
paulrobertlloyd
81
5.2k
Why Our Code Smells
bkeepers
PRO
334
57k
Rebuilding a faster, lazier Slack
samanthasiow
79
8.6k
Producing Creativity
orderedlist
PRO
341
39k
Designing for Performance
lara
604
68k
Art, The Web, and Tiny UX
lynnandtonic
296
20k
We Have a Design System, Now What?
morganepeng
49
7.2k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
504
140k
Facilitating Awesome Meetings
lara
49
6k
Creatively Recalculating Your Daily Design Routine
revolveconf
217
12k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k

Transcript

  1. @ManfredSteyer Micro Frontends with Modern Angular ManfredSteyer

  2. @ManfredSteyer Angular is changing …

  3. @ManfredSteyer

  4. @ManfredSteyer

  5. @ManfredSteyer Federation & Standalone & esbuild Frankenstein w/ Angular Elements

  6. @ManfredSteyer Manfred Steyer

  7. @ManfredSteyer

  8. @ManfredSteyer Booking App Check-in App Boarding App Luggage App

  9. @ManfredSteyer

  10. @ManfredSteyer const Component = await import('other-app/xyz')

  11. @ManfredSteyer const Component = await import('other-app/xyz')

  12. @ManfredSteyer

  13. @ManfredSteyer

  14. @ManfredSteyer

  15. @ManfredSteyer Mindset: Module Federation EcmaScript Modules Import Maps Simple config,

    sharing libs

  16. @ManfredSteyer

  17. @ManfredSteyer 1. ng add @angular-architects/native-federation […] 2. Adjust generated config

    3. Start Shell and Micro Frontends

  18. @ManfredSteyer

  19. @ManfredSteyer

  20. @ManfredSteyer Free eBook (5th Edition) ANGULARarchitects.io/book Module Federation & Nx

  21. @ManfredSteyer Module Federation: Mental Model rocks! Native Federation Web Standards

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

    http://angulararchitects.io