Marcell Kiss, 2022 From Angular Apps to Micro Frontends with @angular/elements 

About me Marcell Kiss Frontend Contractor @martzellk @marcellkiss 

Overview The Project Micro Frontends @angular/elements 

No content

The Project 

The Team Product Owner Scrum Master Business Analyst UI/UX Designer Fullstack Developer 

The Product Change 
 payment method Change 
 search settings Change 
 address 

The Architecture Frontend Interaction Service Address Service Payment Service Search Service 

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 

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 

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 … 

Is this a Micro Frontend? 

Scaling …from this Frontend Interaction Service Address Service Payment Service Search Service 

Scaling to this… Frontend Interaction Service Address Service Payment Service Search Service Frontend Frontend Interaction Service Interaction Service 

Micro Frontends 

The Big Portal Frontend: SPA (Angular) to rule them all… 

Motivations • Scalability • Robustness • Framework agnostic • Smaller, less complex codebase • Independent, specialized teams • Independent 
 development / tests / deployment …faster development… 

Implementation approaches to evaluate • Build Time Integration • URL • Iframe • Web Components • … Server Side Template Composition, JavaScript 

Challenges to overcome • Performance • Payload Size • Communication (Fragments <-> Host) • Versioning • Test Environment • Governance complexity 

Payload Size Angular Address Angular Payment Angular Search Big Portal 

Payload Size Angular Address Angular Payment Angular Search Big Portal Address Angular Payment Search Module Federation by Webpack 5 

Versioning Address Payment Search The Big Portal @latest @latest @latest 

Versioning Design System Address Payment Search The Big Portal @latest @latest @latest @latest @latest @latest @latest 

Versioning Design System Address Payment Search The Big Portal @2.0.0 @latest @latest @latest @1.8.2 @1.8.2 @1.8.2 

@angular/elements 

What’s this? Angular Component @angular/ elements Web Component bundle.js 
 … 
 
 … 
 MainApp Selector: ‘angular-component’ 

De f ine Custom Element npm install @angular/elements --save 

Example Repo angular-web-component-example https://github.com/marcellkiss/angular-web-component-example Try it on Vercel! 

Npm run start MainApp WcApp http://localhost:4200 http://localhost:4210/main.js selector: ‘wc-app’ 

Communication: I/O WcApp Main App 

Routing Address Web-Component mainApp http://localhost:4200/web-component-host/view [route]=‘/view’ routeChange.emit(’/edit’) Routing Logic 

Build Process ng update ngx-build-plus --force Ng build before Ng build after angular.json Credits: Manfred Steyer 

Package Size 

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 

Questions and Answers Thanks for listening! 

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