@ManfredSteyerManfredSteyerMicro Frontends with Module FederationManfred Steyer, ANGULARarchitects.io
View Slide
@ManfredSteyerBooking App Check-in AppBoarding AppLuggage App
@ManfredSteyer
@ManfredSteyerconst Component = await import('other-app/cmp');
@ManfredSteyer#1aModuleFederation#1bSharing Libsand Data#3Dealing withVersionMismatches#4MultipleFrameworks/Versions
@ManfredSteyerManfred Steyer
@ManfredSteyerShell (Host) Microfrontend (Remote)// Maps Urls in// webpack configremotes: {mfe1: "http://..."}// Expose files in// webpack configexposes: {'./Cmp': './my.cmp.ts'}import('mfe1/Cmp')
@ManfredSteyerDynamic Module FederationShell (Host) Microfrontend (Remote)remotes: {}exposes: {'./Cmp': './my.cmp.ts'}import('mfe1/Cmp')
@ManfredSteyerDynamic Module FederationShell (Host) Microfrontend (Remote)remotes: {}exposes: {'./Cmp': './my.cmp.ts'}loadRemoteModule({type: 'module',remoteEntry: 'http://…',exposedModule: './Cmp'})
@ManfredSteyerDynamic Module FederationShell (Host) Microfrontend (Remote)remotes: {}exposes: {'./Cmp': './my.cmp.ts'}loadRemoteModule({type: 'module',remoteEntry: 'http://…',exposedModule: './Cmp'})Helper Function usingthe Webpack API
@ManfredSteyerShell (Host) Microfrontend (Remote)shared: ["@angular/core", "…"]shared: ["@angular/core", "…"]
@ManfredSteyer1) ng add @angular-architects/module-federation2) Adjust generated configuration3) ng serve
@ManfredSteyer1) Adjust your webpack.config.js2) Start your application
@ManfredSteyerSelecting the highest compatible version10.0 10.1
@ManfredSteyerConflict: No highest compatible version11.0 10.1
@ManfredSteyershared: {"my-lib": {singleton: true}}11.0 10.1
@ManfredSteyerin general, however, …
@ManfredSteyer• Framework with two libs a and b• a is using internal APIs of b• a could be an compiled app too(Don't use ^ or ~ in your package.json)
@ManfredSteyershared: {"my-lib": {singleton: true,strictVersion: true // Error instead of warning!}}11.0 10.1
@ManfredSteyershared: {"my-lib": {requiredVersion: ">=1.0.1 <11.1.1"}}
@ManfredSteyer•Several options baked-in•However, best option: avoid conflicts upfront• Option 1: Monorepo• Option 2: Loading several SPAs + sharing nothing!
@ManfredSteyerawait import('other-app/web-cmp');
@ManfredSteyerconst main = await import('other-app/web-cmp');const elm = document.createElement('my-web-cmp')document.body.appendChild(elm);
@ManfredSteyerawait import('other-app/web-cmp');const elm = document.createElement('my-web-cmp')document.body.appendChild(elm);WrapperComponent
@ManfredSteyerhttps://red-ocean-0fe4c4610.azurestaticapps.net
@ManfredSteyerFree eBook (5th Edition)ANGULARarchitects.io/book
@ManfredSteyerConclusionLoading separatelycompiled code &sharing libsBaked-in Strategiesfor VersionMismatchesWebpack RuntimeAPI: DynamicFederationFrankenstein:BootstrappingSeveral SPAs
@ManfredSteyerdSlides & Examples Remote Company Workshopsand Consultinghttp://angulararchitects.io
manfredsteyer
masayaaoyama
yuuu
kilometer
ryunen344
yuhei_fujita
daiksy
tkmnzm
fendo181
usualoma
hyopt
napplecomputer
danielanewman
yeseniaperezcruz
geeforr
bkeepers
reverentgeek
smashingmag
bluesmoon
bermonpainter
sachag
jmmastey
geoffreycrofte
iamctodd