Demystify module federation, and deployment strategy on AWS

on YouTube ↗19m

" summary

Claims that an Angular feature can be developed, built and deployed independently using webpack module federation, actual steps: create a products app (port 4201) and expose a module, point host (4200) to remote entry, use angular-architects CLI to generate webpack config and webpack magic comments for dynamic import; adds a Stencil web component (port 4202) imported at runtime. Deployment uses S3 + CloudFront + ACM + WAF with restricted S3 access and shows a profile change reflected in the main app without redeploying it.

AI-written summary · about

" chapters (8)

1. 0:00Start
2. 6:32Add a Profile Feature
3. 7:34How To Import the Web Component into the Angular Application
4. 8:08Step 2 Is To Add the Custom Element Tag in the Html Template
5. 10:40Integration with Main Application
6. 11:34Demo
7. 14:47What Aws Has To Offer
8. 18:07Recap

" related talks

• 30mFederated Angular: Micro Frontends with Module FederationManfred Steyer · JSWorld Conference 2021
• 30mFederated Angular: Micro Frontends with Module FederationManfred Steyer · JSWorld Conference 2021
• 21mAngular based Micro frontends with module federationManfred Steyer · ng-conf 2022
• 41mThe Microfrontend RevolutionManfred Steyer · angularday 2020
• 35mMicro Frontends with Module Federation, Angular and Azure Static Web AppsManfred Steyer · Global Azure Austria 2021
• 29mThe Micro Frontend Revolution: Webpack 5 Module Federation and AngularManfred Steyer · AngularUP Experience 2020
• 38mThe Microfrontend Revolution: Using Webpack 5 Module Federation with AngularManfred Steyer · AngularNL 2020
• 33mThe Microfrontend Revolution - Using Webpack 5 Module Federation with AngularManfred Steyer · ngVikings 2020