Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up
for free
The Microfrontend Revolution Module Federation with Angular @AngularKharkiv
Manfred Steyer
PRO
December 17, 2020
0
310
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
manfredsteyer
PRO
0
89
manfredsteyer
PRO
0
84
manfredsteyer
PRO
0
190
manfredsteyer
PRO
0
140
manfredsteyer
PRO
0
120
manfredsteyer
PRO
0
240
manfredsteyer
PRO
0
200
manfredsteyer
PRO
0
360
manfredsteyer
PRO
0
160
Featured
See All Featured
eileencodes
113
25k
jeffersonlam
329
15k
malarkey
192
8.6k
lauravandoore
437
28k
mongodb
23
3.9k
jmmastey
10
610
shlominoach
176
7.5k
holman
461
280k
iamctodd
19
2k
dougneiner
55
5.4k
smashingmag
283
47k
ddemaree
273
31k
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