Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
@ManfredSteyer ManfredSteyer The Microfrontend Revolution Module Federation Manfred Steyer, ANGULARarchitects.io
Slide 2
Slide 2 text
@ManfredSteyer
Slide 3
Slide 3 text
@ManfredSteyer Booking App Booking App Check-in App Check-in App Boarding App Boarding App Luggage App Luggage App Micro Frontends
Slide 4
Slide 4 text
@ManfredSteyer Micro Frontends
Slide 5
Slide 5 text
@ManfredSteyer
Slide 6
Slide 6 text
@ManfredSteyer Contents #1: Module Federation #2: Federated Angular #3: Roadmap
Slide 7
Slide 7 text
@ManfredSteyer Manfred Steyer
Slide 8
Slide 8 text
@ManfredSteyer
Slide 9
Slide 9 text
@ManfredSteyer
Slide 10
Slide 10 text
@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!
Slide 11
Slide 11 text
@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')
Slide 12
Slide 12 text
@ManfredSteyer How to Get the Microfrontend's URL? Shell (Host) Microfrontend (Remote) RemoteEntry.js
Slide 13
Slide 13 text
@ManfredSteyer How to Share Libs? Shell (Host) Microfrontend (Remote) shared: [ "@angular/core", "…" ] shared: [ "@angular/core", "…" ]
Slide 14
Slide 14 text
@ManfredSteyer
Slide 15
Slide 15 text
@ManfredSteyer ?
Slide 16
Slide 16 text
@ManfredSteyer Custom Builder
Slide 17
Slide 17 text
@ManfredSteyer
Slide 18
Slide 18 text
@ManfredSteyer 1) ng add @angular-architects/module-federation 2) Adjust generated configuration 3) ng serve
Slide 19
Slide 19 text
@ManfredSteyer
Slide 20
Slide 20 text
@ManfredSteyer
Slide 21
Slide 21 text
@ManfredSteyer Well … Webpack 5 is final! CLI 11 is final! CLI 11: Webpack 5 Opt-In (Experimental)
Slide 22
Slide 22 text
@ManfredSteyer Free eBook ANGULARarchitects.io/book Updated for Module Federation and Alternatives
Slide 23
Slide 23 text
@ManfredSteyer Conclusion Module Federation Loading Separately Deployed Code Micro Frontends Federated Angular
Slide 24
Slide 24 text
@ManfredSteyer
Slide 25
Slide 25 text
@ManfredSteyer d Slides & Examples Remote Company Workshops and Consulting http://angulararchitects.io