How to build Micro Frontends with @angular/elements

How to build Micro Frontends with @angular/elements
Using Web Components / Custom Elements

Was presented on Angular Meetup Hungary [EN] and on Angular Meetup Graz [DE] in 2022

Demo: https://github.com/marcellkiss/angular-web-component-example

1. Marcell Kiss, 2022 From Angular Apps to Micro Frontends with @angular/elements
2. About me Marcell Kiss Frontend Contractor @martzellk @marcellkiss
3. Overview The Project Micro Frontends @angular/elements
5. The Project
6. The Team Product Owner Scrum Master Business Analyst UI/UX Designer Fullstack Developer
7. The Product Change 
 payment method Change 
 search settings Change 
 address
8. The Architecture Frontend Interaction Service Address Service Payment Service Search Service
9. Frontend Structure Nx Workspace - Smart, Fast and Extensible Build System - apps - change portal - libs - address - payment - search - shared @change-portal/search Change portal Address Payment Search Shared
10. UX Flow Change Address Change Payment Method Change Search Settings Enter your Address… Continue Home Edit Save Continue Con f irm Feedback ZIP City Address: Universitätspl. 3, ZIP: 8010 City: Graz Back Changes are saved address lib /address/edit /address/con f irm /address/feedback
11. Mobile Integration • Integration via URL 
 (in-app browser) • Authenticaton via SSO • Same look and feel Do X Do Y Change Address Main Menu Enter your Address… Continue Edit ZIP City Https://change-portal.com/address/edit …
12. Is this a Micro Frontend?
13. Scaling …from this Frontend Interaction Service Address Service Payment Service Search Service
14. Scaling to this… Frontend Interaction Service Address Service Payment Service Search Service Frontend Frontend Interaction Service Interaction Service
15. Micro Frontends
16. The Big Portal Frontend: SPA (Angular) to rule them all…
17. Motivations • Scalability • Robustness • Framework agnostic • Smaller, less complex codebase • Independent, specialized teams • Independent 
 development / tests / deployment …faster development…
18. Implementation approaches to evaluate • Build Time Integration • URL • Iframe • Web Components • … Server Side Template Composition, JavaScript
19. Challenges to overcome • Performance • Payload Size • Communication (Fragments <-> Host) • Versioning • Test Environment • Governance complexity
20. Payload Size Angular Address Angular Payment Angular Search Big Portal
21. Payload Size Angular Address Angular Payment Angular Search Big Portal Address Angular Payment Search Module Federation by Webpack 5
22. Versioning Address Payment Search The Big Portal @latest @latest @latest
23. Versioning Design System Address Payment Search The Big Portal @latest @latest @latest @latest @latest @latest @latest
24. Versioning Design System Address Payment Search The Big Portal @2.0.0 @latest @latest @latest @1.8.2 @1.8.2 @1.8.2
25. @angular/elements
26. What’s this? Angular Component @angular/ elements Web Component bundle.js <html> 
 … 
 <angular-component></angular-component> 
 … 
 </html> MainApp Selector: ‘angular-component’
27. De f ine Custom Element npm install @angular/elements --save
28. Example Repo angular-web-component-example https://github.com/marcellkiss/angular-web-component-example Try it on Vercel!
29. Npm run start MainApp WcApp http://localhost:4200 http://localhost:4210/main.js selector: ‘wc-app’ <wc-app></wc-app>
30. Communication: I/O WcApp Main App
31. Routing Address Web-Component mainApp http://localhost:4200/web-component-host/view [route]=‘/view’ routeChange.emit(’/edit’) Routing Logic
32. Build Process ng update ngx-build-plus --force Ng build before Ng build after angular.json Credits: Manfred Steyer
33. Package Size
34. Summary Project • Team • Product • Architecture • Mobile Integration • Scaling Micro Frontends • The Vision • Motivations • Approaches • Challenges • Versioning @angular/elements • CustomElementRegistry • Example Repo • Inputs / Outputs • Routing • Build Process
35. Questions and Answers Thanks for listening!
36. Resources - [Book] Micro Frontends in Action by Michael Geers 
 https://micro-frontends.org/ 
 - [Article] Micro Frontends by Martin Fowler 
 https://martinfowler.com/articles/micro-frontends.html 
 - [Docs] Web Components by MDN 
 https://developer.mozilla.org/en-US/docs/Web/Web_Components - [Docs] @angular/elements 
 https://angular.io/guide/elements 
 - [OSS] ngx-build-plus 
 https://github.com/manfredsteyer/ngx-build-plus#readme 
 - [OSS] Angular Elements Example with nx workspace 
 https://github.com/marcellkiss/angular-web-component-example 
 - [OSS] Angular Module Federation 
 https://github.com/angular-architects/module-federation-plugin - [Presentation] Frontend Monoliths: 
 https://www.slideshare.net/JonasBandi/frontend-monoliths-run-if-you-can-137391467