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

Micro Frontends with Module Federation in Angul...

Micro Frontends with Module Federation in Angular 12

Manfred Steyer

May 12, 2021
Tweet

More Decks by Manfred Steyer

Other Decks in Programming

Transcript

  1. @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!
  2. @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')
  3. @ManfredSteyer How to Get the Microfrontend's URL? Shell (Host) Microfrontend

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

    [ "@angular/core", "…" ] shared: [ "@angular/core", "…" ]
  5. @ManfredSteyer Webpack 5 is Backed Into CLI 12 No need

    for forcing the CLI into webpack 5 anymore: "resolutions": { "webpack": "^5.0.0" }, Feel free to use yarn or npm
  6. @ManfredSteyer Better Monorepo Support Migrate from Angular 11? Have a

    look on how we generate the webpack.config.js in Version 12
  7. @ManfredSteyer Booking Booking Boarding Boarding Shared Shared Feature Feature Feature

    Feature Feature Feature Feature Feature Feature Feature … … … … … … … … … … … … … … … … … … Booking App Booking App Boarding App Boarding App Btw: Also Works Perfectly w/ Multiple Repos Repository n Repository 2 Repository 1
  8. @ManfredSteyer Evolution, not Revolution! Keep Track with upcoming Angular CLI

    versions Small Features to automate repetitive tasks