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
Federated Angular: Micro Frontends with Module Federation @jsWorld 2021
Search
Manfred Steyer
PRO
February 25, 2021
Programming
0
720
Federated Angular: Micro Frontends with Module Federation @jsWorld 2021
Manfred Steyer
PRO
February 25, 2021
Tweet
Share
More Decks by Manfred Steyer
See All by Manfred Steyer
Migrating to Signals: A Practical Workshop
manfredsteyer
PRO
0
280
Micro Frontends with Web Standards
manfredsteyer
PRO
0
220
The New NGRX Signal Store for Angular: 3+n Flavors
manfredsteyer
PRO
1
190
Leveraging the new NGRX Signal Store
manfredsteyer
PRO
0
150
Modern State Management in Angular: The 3+n Flavors of the NGRX Signal Store
manfredsteyer
PRO
0
95
NGRX Signal Store
manfredsteyer
PRO
0
200
signals-arc.pdf
manfredsteyer
PRO
0
220
Camel and Eye of a Needle: Integration of SPA-based Micro Frontends
manfredsteyer
PRO
0
91
Micro Frontends with Modern Angular
manfredsteyer
PRO
1
480
Other Decks in Programming
See All in Programming
Deep Dive 大規模システムアーキテクチャ/開発組織エンジニアリング / Deep Dive Large-Scale System Architecture, Development Organization Engineering
nrslib
15
2.9k
デザインシステムで Tailwind CSSとCSS in JSに分散投資をしたら良かった話
fsubal
14
3.1k
とにかくHTTP3をライトニングに話す / Anyway, I'll talk to Lightning about HTTP3.
seike460
PRO
0
120
孤独のCTOグルメという やや奇抜な企画をやった目的と効果
shoheimitani
3
1k
Why 1 + 1 = 2 in Swift?
1plus4
1
240
Ruby製社内ツールのGo移行
bgpat
2
260
もうすぐ新年度、Babylon.jsがお勧めな3個の理由
hideg
0
160
せっかくモデル図描くのなら、嬉しいことが多い方がいいよね!
kuboaki
1
1.3k
フロントエンドパフォーマンス 入門
shouta2
7
1.5k
Docker ハンズオン / docker-hands-on
suzukihoge
51
16k
TDDと今まで
kanayannet
0
140
htmx is fun!
codehex
2
190
Featured
See All Featured
Principles of Awesome APIs and How to Build Them.
keavy
119
16k
Mobile First: as difficult as doing things right
swwweet
215
8.5k
Making the Leap to Tech Lead
cromwellryan
122
8.4k
GraphQLの誤解/rethinking-graphql
sonatard
48
9.1k
YesSQL, Process and Tooling at Scale
rocio
160
13k
Making Projects Easy
brettharned
106
5.4k
Building Adaptive Systems
keathley
29
1.8k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
185
15k
Thoughts on Productivity
jonyablonski
57
3.8k
Pencils Down: Stop Designing & Start Developing
hursman
115
11k
How to Ace a Technical Interview
jacobian
272
22k
Fantastic passwords and where to find them - at NoRuKo
philnash
35
2.4k
Transcript
@ManfredSteyer ManfredSteyer Federated Angular: Micro Frontends with Module Federation Manfred
Steyer, ANGULARarchitects.io
@ManfredSteyer
@ManfredSteyer Micro Frontends
@ManfredSteyer
@ManfredSteyer Contents #1: Module Federation #2 Federated Angular #3: Possible
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 When can we have it? Webpack 5 and Module
Federation: final Angular CLI 11: Experimental Opt-in for webpack 5 Angular CLI 12: Official webpack 5 integration
@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 d Slides & Examples Remote Company Workshops and Consulting
http://angulararchitects.io