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 the NGRX Signal Store New Rules for Your Architecture @BASTA 2024 in Mainz
manfredsteyer
PRO
0
10
Modern Angular with the NGRX Signal Store New Rules for Your Architecture @BASTA! 2024 in Mainz
manfredsteyer
PRO
0
25
Successful with Signals: 3 Patterns for Your Architecture
manfredsteyer
PRO
0
71
Native Federation: The Future of Micro Frontends in Angular
manfredsteyer
PRO
0
320
Architectures with Lightweight Stores: New Rules and Options
manfredsteyer
PRO
0
250
3 Effective Rules for Success with Signals in Angular
manfredsteyer
PRO
1
250
Modern Angular: Renovation for Your Applications
manfredsteyer
PRO
0
210
Where do we go from here? Strategies for Signals
manfredsteyer
PRO
0
200
Successful with Signals: 3 Effective Rules
manfredsteyer
PRO
0
120

Featured

See All Featured
Large-scale JavaScript Application Architecture
addyosmani
508
110k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
227
52k
Side Projects
sachag
451
42k
For a Future-Friendly Web
brad_frost
174
9.3k
Building Adaptive Systems
keathley
36
2.1k
Building Applications with DynamoDB
mza
90
6k
YesSQL, Process and Tooling at Scale
rocio
167
14k
GraphQLとの向き合い方2022年版
quramy
43
13k
The Illustrated Children's Guide to Kubernetes
chrisshort
47
48k
Why Our Code Smells
bkeepers
PRO
334
56k
Being A Developer After 40
akosma
84
590k
From Idea to $5000 a Month in 5 Months
shpigford
379
46k

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