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

Micro Frontends with Modern Angular

Manfred Steyer
October 18, 2023
100

Micro Frontends with Modern Angular

Manfred Steyer

October 18, 2023
Tweet

Transcript

  1. @ManfredSteyer
    Micro Frontends with Modern Angular
    ManfredSteyer

    View full-size slide

  2. @ManfredSteyer
    Angular is changing …

    View full-size slide

  3. @ManfredSteyer

    View full-size slide

  4. @ManfredSteyer

    View full-size slide

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

    View full-size slide

  6. @ManfredSteyer
    Manfred Steyer

    View full-size slide

  7. @ManfredSteyer

    View full-size slide

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

    View full-size slide

  9. @ManfredSteyer

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  12. @ManfredSteyer

    View full-size slide

  13. @ManfredSteyer

    View full-size slide

  14. @ManfredSteyer

    View full-size slide

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

    View full-size slide

  16. @ManfredSteyer

    View full-size slide

  17. @ManfredSteyer
    1. ng add @angular-architects/native-federation […]
    2. Adjust generated config
    3. Start Shell and Micro Frontends

    View full-size slide

  18. @ManfredSteyer

    View full-size slide

  19. @ManfredSteyer

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  22. @ManfredSteyer
    d
    Slides & Examples Remote Company Workshops
    and Consulting
    http://angulararchitects.io

    View full-size slide