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

Federated Angular in 15 min

Federated Angular in 15 min

Avatar for Manfred Steyer

Manfred Steyer

January 21, 2021
Tweet

More Decks by Manfred Steyer

Other Decks in Programming

Transcript

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

    App Boarding App Luggage App Luggage App Micro Frontends
  2. @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!
  3. @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')
  4. @ManfredSteyer How to Get the Microfrontend's URL? Shell (Host) Microfrontend

    (Remote) RemoteEntry.js <script src="…"></script>
  5. @ManfredSteyer How to Share Libs? Shell (Host) Microfrontend (Remote) shared:

    [ "@angular/core", "…" ] shared: [ "@angular/core", "…" ]
  6. @ManfredSteyer Well … webpack 5 is final! CLI 11 is

    final! CLI 11: Webpack 5 Opt-In (Experimental) CLI 12 in May 2021: Stable webpack5 Integration