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 Angular 12
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
Native Federation: The Future of Micro Frontends in Angular
manfredsteyer
PRO
0
43
The New NGRX Signal Store for Angular: 3+n Flavors of the Signal Store
manfredsteyer
PRO
0
31
Micro Frontends with Modern Angular and Island Architectures @ijs London 2024
manfredsteyer
PRO
0
85
Modern State Management in Angular: 3+n Flavors of the Signal Store @ijs London 2024
manfredsteyer
PRO
0
80
Changed Rules: Architectures with Lightweight Stores
manfredsteyer
PRO
0
240
Migrating to Signals: A Practical Workshop
manfredsteyer
PRO
0
420
Micro Frontends with Web Standards
manfredsteyer
PRO
1
300
The New NGRX Signal Store for Angular: 3+n Flavors
manfredsteyer
PRO
1
220
Leveraging the new NGRX Signal Store
manfredsteyer
PRO
0
170
Other Decks in Programming
See All in Programming
障害対応を起点としたもっといい開発と運用のサイクル作りのためにできること / Hatena Enginner Seminar #29
polamjag
0
240
Hanami and htmx
bkuhlmann
0
210
AmperとFleetを使ったAndroidアプリ
yoppie
0
180
効率化に挑戦してみたらモバイル開発が少し快適になった話
ryunakayama
0
130
DMMプラットフォームがTiDB Cloudを採用した背景
pospome
9
4.1k
Let's learn code review
riofujimon
2
500
SwiftUIで使いやすいToastの作り方 / How to build a Toast system which is easy to use in SwiftUI
lovee
3
150
Kotlin Multiplatform at Stable and Beyond (Android Makers 2024)
zsmb
0
310
雑に思考を整理する技術と効能
konifar
60
29k
dbtのドメイン分割による データ基盤の改善とDigdagとの連携
sakama
0
370
MetricKitで予期せぬ終了を検知する話 / Detect unexpected termination with MetricKit
nekowen
1
190
From Spring Boot 2 to Spring Boot 3 with Java 21 and Jakarta EE
ivargrimstad
0
170
Featured
See All Featured
Into the Great Unknown - MozCon
thekraken
10
1k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
How To Stay Up To Date on Web Technology
chriscoyier
782
250k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
21
1.6k
Mobile First: as difficult as doing things right
swwweet
216
8.6k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
226
51k
Designing Experiences People Love
moore
136
23k
How to train your dragon (web standard)
notwaldorf
73
5.2k
Thoughts on Productivity
jonyablonski
58
3.8k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
352
28k
Building Effective Engineering Teams - LeadDev
addyosmani
28
1.9k
Teambox: Starting and Learning
jrom
128
8.4k
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