Federated Angular – Why and How?

@ManfredSteyer ManfredSteyer Federated Angular – Why and How? Manfred Steyer,
ANGULARarchitects.io

@ManfredSteyer Which one is the best?

@ManfredSteyer It’s all about consequences in your very situation!

@ManfredSteyer Micro Frontends

@ManfredSteyer Contents #1 Why: Real-World Case Studies #2 How: Module
Federation

@ManfredSteyer Manfred Steyer

@ManfredSteyer

@ManfredSteyer Deadalus Health Care (formerly AGFA Health Care)

@ManfredSteyer DATEV eG (~8000 Employees, 200 Products)

@ManfredSteyer Huge European Bank Domain A Domain B Domain C
Domain D Domain E Domain F eBanking

@ManfredSteyer Another Huge European Bank Details from Domain A Customer
Relationship Management Domain A Customer XYZ Domain B Domain C

@ManfredSteyer Quality Bytes (No Micro Frontends but Domain Cutting)

@ManfredSteyer Reasons for Micro Frontends Huge Product/ Product Suite Scaling
Teams & Domains Switching out Technologies Rapitely Changing Requirements

@ManfredSteyer Consequences Effort for „Meta Framework“ Sharing Code at Runtime
and Bundle Size Common Look and Feel

@ManfredSteyer

@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!

@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')

@ManfredSteyer How to Get the Microfrontend's URL? Shell (Host) Microfrontend
(Remote) RemoteEntrypoint.js <script src="…"></script>

@ManfredSteyer How to Share Libs? Shell (Host) Microfrontend (Remote) shared:
[ "@angular/core", "…" ] shared: [ "@angular/core", "…" ]

@ManfredSteyer 1) ng add @angular-architects/module-federation 2) Adjust generated configuration 3)
ng serve

@ManfredSteyer

@ManfredSteyer Conclusion No free Lunch: Consequences Scaling Teams & Domains
Module Federation

@ManfredSteyer

@ManfredSteyer d Slides & Examples Remote Company Workshops and Consulting
http://angulararchitects.io

Federated Angular – Why and How?

Federated Angular – Why and How?

Manfred Steyer
PRO

More Decks by Manfred Steyer

Other Decks in Programming

Featured

Transcript

@ManfredSteyer ManfredSteyer Federated Angular – Why and How? Manfred Steyer,

@ManfredSteyer Which one is the best?

@ManfredSteyer It’s all about consequences in your very situation!

@ManfredSteyer Micro Frontends

@ManfredSteyer Contents #1 Why: Real-World Case Studies #2 How: Module

@ManfredSteyer Manfred Steyer

@ManfredSteyer

@ManfredSteyer Deadalus Health Care (formerly AGFA Health Care)

@ManfredSteyer DATEV eG (~8000 Employees, 200 Products)

@ManfredSteyer Huge European Bank Domain A Domain B Domain C

@ManfredSteyer Another Huge European Bank Details from Domain A Customer

@ManfredSteyer Quality Bytes (No Micro Frontends but Domain Cutting)

@ManfredSteyer Reasons for Micro Frontends Huge Product/ Product Suite Scaling

@ManfredSteyer Consequences Effort for „Meta Framework“ Sharing Code at Runtime

@ManfredSteyer

@ManfredSteyer Idea const Component = await import('http://other-app/xyz') Does not work

@ManfredSteyer Webpack 5 Module Federation Shell (Host) Microfrontend (Remote) //

@ManfredSteyer How to Get the Microfrontend's URL? Shell (Host) Microfrontend

@ManfredSteyer How to Share Libs? Shell (Host) Microfrontend (Remote) shared:

@ManfredSteyer 1) ng add @angular-architects/module-federation 2) Adjust generated configuration 3)

@ManfredSteyer

@ManfredSteyer Conclusion No free Lunch: Consequences Scaling Teams & Domains

@ManfredSteyer

@ManfredSteyer d Slides & Examples Remote Company Workshops and Consulting