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
Micro Frontends with Module Federation in Angul...
Search
Manfred Steyer
PRO
May 12, 2021
Programming
2
6.3k
Micro Frontends with Module Federation in Angular 12
Manfred Steyer
PRO
May 12, 2021
Tweet
Share
More Decks by Manfred Steyer
See All by Manfred Steyer
Micro Frontends Unmasked Opportunities, Challenges, Alternatives
manfredsteyer
PRO
0
96
3 Effective Rules for Using Signals in Angular
manfredsteyer
PRO
0
110
Your Architecture as a Crime Scene: Improvements with Forensic Analysis @ijs Munich 2024
manfredsteyer
PRO
0
31
3 Effective Rules for Using Signals in Angular
manfredsteyer
PRO
0
100
Micro Frontends Unmasked: Opportunities, Challenges, Alternatives @w-jax 2024 München
manfredsteyer
PRO
0
90
3 Effective Rules for Using Signals in Angular
manfredsteyer
PRO
1
100
3 Effective Rules for Using Signals in Angular
manfredsteyer
PRO
0
59
Modern Angular: Renovation for Your Applications
manfredsteyer
PRO
0
250
Vertical Architectures for Scalable Angular Applications
manfredsteyer
PRO
0
370
Other Decks in Programming
See All in Programming
CSC509 Lecture 09
javiergs
PRO
0
140
macOS でできる リアルタイム動画像処理
biacco42
9
2.4k
WebフロントエンドにおけるGraphQL(あるいはバックエンドのAPI)との向き合い方 / #241106_plk_frontend
izumin5210
4
1.4k
CSC509 Lecture 12
javiergs
PRO
0
160
Less waste, more joy, and a lot more green: How Quarkus makes Java better
hollycummins
0
100
PHP でアセンブリ言語のように書く技術
memory1994
PRO
1
170
Better Code Design in PHP
afilina
PRO
0
120
役立つログに取り組もう
irof
28
9.6k
Duckdb-Wasmでローカルダッシュボードを作ってみた
nkforwork
0
120
AWS Lambdaから始まった Serverlessの「熱」とキャリアパス / It started with AWS Lambda Serverless “fever” and career path
seike460
PRO
1
260
どうして僕の作ったクラスが手続き型と言われなきゃいけないんですか
akikogoto
1
120
弊社の「意識チョット低いアーキテクチャ」10選
texmeijin
5
24k
Featured
See All Featured
Typedesign – Prime Four
hannesfritz
40
2.4k
Bootstrapping a Software Product
garrettdimon
PRO
305
110k
Building Better People: How to give real-time feedback that sticks.
wjessup
364
19k
The Pragmatic Product Professional
lauravandoore
31
6.3k
Music & Morning Musume
bryan
46
6.2k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
16
2.1k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
Facilitating Awesome Meetings
lara
50
6.1k
Making the Leap to Tech Lead
cromwellryan
133
8.9k
Git: the NoSQL Database
bkeepers
PRO
427
64k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.5k
Transcript
@ManfredSteyer ManfredSteyer Micro Frontends with Module Federation in Angular 12
Manfred Steyer, ANGULARarchitects.io
@ManfredSteyer Contents #1: Module Federation 101 #2: What's new for
MF & Angular 12 #3: Future Features
@ManfredSteyer Manfred Steyer
@ManfredSteyer
@ManfredSteyer Micro Frontends
@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 1) ng add @angular-architects/module-federation 2) Adjust generated configuration 3)
ng serve
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer Webpack 5 is Backed Into CLI 12 No need
for forcing the CLI into webpack 5 anymore: "resolutions": { "webpack": "^5.0.0" }, Feel free to use yarn or npm
@ManfredSteyer Better Monorepo Support Share like npm package
@ManfredSteyer Big Thanks to Webpack's Tobias Koppers
@ManfredSteyer Better Monorepo Support Migrate from Angular 11? Have a
look on how we generate the webpack.config.js in Version 12
@ManfredSteyer npm run run:all
@ManfredSteyer Booking Booking Boarding Boarding Shared Shared Feature Feature Feature
Feature Feature Feature Feature Feature Feature Feature … … … … … … … … … … … … … … … … … … Booking App Booking App Boarding App Boarding App Btw: Also Works Perfectly w/ Multiple Repos Repository n Repository 2 Repository 1
@ManfredSteyer Tutorial is Updated https://www.npmjs.com/package/@angular-architects/module-federation
@ManfredSteyer Make sure you use Version ^12 for Angular 12!
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer Evolution, not Revolution! Keep Track with upcoming Angular CLI
versions Small Features to automate repetitive tasks
@ManfredSteyer Free eBook ANGULARarchitects.io/book Updated for Module Federation and Alternatives
@ManfredSteyer Conclusion Loading Separately Deployed Code Better Monorepo Support Multi
Repos supported too! run:all More to come!
@ManfredSteyer d Slides & Examples Remote Company Workshops and Consulting
http://angulararchitects.io