The Microfrontend Revolution Module Federation with Angular @ngConf

15934fa2aa7b2ce21f091e9b7cffa856?s=47 Manfred Steyer
November 20, 2020
Programming
0
94

The Microfrontend Revolution Module Federation with Angular @ngConf

15934fa2aa7b2ce21f091e9b7cffa856?s=128

Manfred Steyer

November 20, 2020
Tweet

More Decks by Manfred Steyer

See All by Manfred Steyer
15934fa2aa7b2ce21f091e9b7cffa856?s=48 manfredsteyer
0
53
15934fa2aa7b2ce21f091e9b7cffa856?s=48 manfredsteyer
0
77
15934fa2aa7b2ce21f091e9b7cffa856?s=48 manfredsteyer
0
160
15934fa2aa7b2ce21f091e9b7cffa856?s=48 manfredsteyer
1
130
15934fa2aa7b2ce21f091e9b7cffa856?s=48 manfredsteyer
0
150
15934fa2aa7b2ce21f091e9b7cffa856?s=48 manfredsteyer
0
56
15934fa2aa7b2ce21f091e9b7cffa856?s=48 manfredsteyer
0
190
15934fa2aa7b2ce21f091e9b7cffa856?s=48 manfredsteyer
0
140
15934fa2aa7b2ce21f091e9b7cffa856?s=48 manfredsteyer
1
190

Other Decks in Programming

See All in Programming
C0e29dade6ec33081689ac135a269b45?s=48 crgarridos
1
150
3b38214ae9927683d69680cb6161852b?s=48 jorgecastilloprz
0
1.7k
0ed10d1154c696886ca483fe827cb299?s=48 thatjeffsmith
1
340
2ddd3d3e0d92ad45884bdcbef3a514a8?s=48 chiaoteni
2
330
6170c1d1970baf2a36a9ae2955e47ff3?s=48 jimhester
0
250
3e049ed33195d00a8b745b16c63dce6e?s=48 leew
0
150
7c9b8b368924556d8642bdaed3ded1f5?s=48 danilop
1
230
Acd2f6f7498ea41881e161e191aa7c02?s=48 yattom
3
400
275e91e7de0d6321f3759c2d0789c6d2?s=48 amaltson
2
240
0eba807ea367a2b648480d20f52d3af3?s=48 haco
0
210
12c88a3a10478fa18d0363b3ba3d9df1?s=48 christianliebel
0
120
24e791120237a2df0d4fcdd98161c56b?s=48 pentake9
0
130

Featured

See All Featured
465724d73fe3a92c0879fdfb43a3a6f3?s=48 philhawksworth
190
17k
1f74b13f1e5c6c69cb5d7fbaabb1e2cb?s=48 sferik
609
54k
56c4053438af8e8b90d6f53cbb7573be?s=48 jakevdp
773
190k
5b6a2bd86ef643786a381a212e0ef2f1?s=48 geoffreycrofte
12
610
96270e4c3e5e9806cf7245475c00b275?s=48 addyosmani
310
21k
15f2b8221f247985a27a627d2ece72f0?s=48 pauljervisheath
195
15k
E14f55d3f939977cecbf51b64ff6f861?s=48 keithpitt
401
20k
Bfd6b681ec6e8c9bef82ff0521c364f7?s=48 kastner
54
1.9k
766b9746b59e6f09e280cd33cf4ed419?s=48 skipperchong
6
590
Be9caeb9d4ef9944d151af909063ed6e?s=48 samlambert
236
9.8k
64827b31aef81498662e8af4bd6d5157?s=48 jonrohan
1020
370k
E190023b66e2b8aa73a842b106920c93?s=48 zenorocha
296
39k

Transcript

  1. @ManfredSteyer ManfredSteyer The Microfrontend Revolution Module Federation with Angular Manfred

    Steyer, ANGULARarchitects.io

  2. @ManfredSteyer

  3. @ManfredSteyer

  4. @ManfredSteyer Contents #1: Module Federation #2 Federated Angular #3: Possible

    Roadmap

  5. @ManfredSteyer Manfred Steyer

  6. @ManfredSteyer

  7. @ManfredSteyer

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

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

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

    (Remote) RemoteEntry.js <script src="…"></script>

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

    [ "@angular/core", "…" ] shared: [ "@angular/core", "…" ]

  12. @ManfredSteyer

  13. @ManfredSteyer ?

  14. @ManfredSteyer Custom Builder

  15. @ManfredSteyer

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

    ng serve

  17. @ManfredSteyer

  18. @ManfredSteyer

  19. @ManfredSteyer When can we have it? Webpack 5 and Module

    Federation: final Angular CLI must support webpack 5 too Angular CLI 11 (Beta) allows to opt into webpack 5 Angular CLI 11 ? (fall 2020)

  20. @ManfredSteyer Free eBook ANGULARarchitects.io/book Updated for Module Federation and Alternatives

  21. @ManfredSteyer Conclusion Module Federation Loading Separately Deployed Code Micro Frontends

    Federated Angular

  22. @ManfredSteyer d Slides & Examples Remote Company Workshops and Consulting

    http://angulararchitects.io