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

Micro Frontends with Modern Angular

Manfred Steyer
PRO
October 18, 2023
0
120

Micro Frontends with Modern Angular

Manfred Steyer
PRO

October 18, 2023
Tweet

More Decks by Manfred Steyer

See All by Manfred Steyer
Native Federation: The Future of Micro Frontends in Angular
manfredsteyer
PRO
0
82
The New NGRX Signal Store for Angular: 3+n Flavors of the Signal Store
manfredsteyer
PRO
0
48
Micro Frontends with Modern Angular and Island Architectures @ijs London 2024
manfredsteyer
PRO
0
90
Modern State Management in Angular: 3+n Flavors of the Signal Store @ijs London 2024
manfredsteyer
PRO
0
85
Changed Rules: Architectures with Lightweight Stores
manfredsteyer
PRO
0
240
Migrating to Signals: A Practical Workshop
manfredsteyer
PRO
0
420
Micro Frontends with Web Standards
manfredsteyer
PRO
1
310
The New NGRX Signal Store for Angular: 3+n Flavors
manfredsteyer
PRO
1
220
Leveraging the new NGRX Signal Store
manfredsteyer
PRO
0
170

Featured

See All Featured
Designing Experiences People Love
moore
136
23k
Why You Should Never Use an ORM
jnunemaker
PRO
51
8.6k
The World Runs on Bad Software
bkeepers
PRO
61
6.7k
The Straight Up "How To Draw Better" Workshop
denniskardys
228
130k
Robots, Beer and Maslow
schacon
PRO
155
7.9k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
33
6k
Teambox: Starting and Learning
jrom
128
8.4k
The Invisible Customer
myddelton
114
12k
10 Git Anti Patterns You Should be Aware of
lemiorhan
649
58k
jQuery: Nuts, Bolts and Bling
dougneiner
59
7.2k
The Power of CSS Pseudo Elements
geoffreycrofte
61
5k
How STYLIGHT went responsive
nonsquared
92
4.8k

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