Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
The Microfrontend Revolution Module Federation ...
Search
Manfred Steyer
PRO
December 17, 2020
0
440
The Microfrontend Revolution Module Federation with Angular @AngularKharkiv
Manfred Steyer
PRO
December 17, 2020
Tweet
Share
More Decks by Manfred Steyer
See All by Manfred Steyer
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
160
The Missing Link in Angular‘s Signal Story Resource API and httpResource @ngRome 2025
manfredsteyer
PRO
0
76
Your Architecture as a Crime Scene:Forensic Analysis
manfredsteyer
PRO
0
140
Rethinking Data Access: The New httpResource in Angular
manfredsteyer
PRO
0
290
Reactive Thinking with Signals, Resource API, and httpResource @Devm.io Angular 20 Launch Party
manfredsteyer
PRO
0
190
JavaScript as a Crime SceneForensic Analysis
manfredsteyer
PRO
0
90
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @jax2025 in Mainz, Germany
manfredsteyer
PRO
0
170
Premier Disciplin for Micro Frontends Multi Version/ Framework Scenarios
manfredsteyer
PRO
0
97
Your Architecture as a Crime SceneForensic Analysis
manfredsteyer
PRO
0
72
Featured
See All Featured
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
720
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
60k
Building an army of robots
kneath
306
45k
RailsConf 2023
tenderlove
30
1.1k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.5k
BBQ
matthewcrist
89
9.7k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
281
13k
Music & Morning Musume
bryan
46
6.6k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
A designer walks into a library…
pauljervisheath
207
24k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Transcript
@ManfredSteyer ManfredSteyer The Microfrontend Revolution Module Federation with Angular Manfred
Steyer, ANGULARarchitects.io
@ManfredSteyer
@ManfredSteyer Booking App Booking App Check-in App Check-in App Boarding
App Boarding App Luggage App Luggage App Micro Frontends
@ManfredSteyer Micro Frontends
@ManfredSteyer
@ManfredSteyer Contents #1: Module Federation #2: Federated Angular #3: Roadmap
@ManfredSteyer Manfred Steyer
@ManfredSteyer
@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) RemoteEntry.js <script src="…"></script>
@ManfredSteyer How to Share Libs? Shell (Host) Microfrontend (Remote) shared:
[ "@angular/core", "…" ] shared: [ "@angular/core", "…" ]
@ManfredSteyer
@ManfredSteyer ?
@ManfredSteyer Custom Builder
@ManfredSteyer
@ManfredSteyer 1) ng add @angular-architects/module-federation 2) Adjust generated configuration 3)
ng serve
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer Well … Webpack 5 is final! CLI 11 is
final! CLI 11: Webpack 5 Opt-In (Experimental)
@ManfredSteyer Free eBook ANGULARarchitects.io/book Updated for Module Federation and Alternatives
@ManfredSteyer Conclusion Module Federation Loading Separately Deployed Code Micro Frontends
Federated Angular
@ManfredSteyer
@ManfredSteyer d Slides & Examples Remote Company Workshops and Consulting
http://angulararchitects.io