What are the main strategies for composing multiple micro frontends together into one user experience?

Common strategies include a shell application that dynamically loads other applications at runtime, often using Module Federation, using web components like Angular Elements to embed independently built pieces, or server side composition, where a server assembles pieces from different applications before sending the final page to the browser.

// A shell app's routing configuration loading different micro frontends per route
const routes = [
  { path: 'catalog', loadChildren: () => loadRemoteModule('catalog', './Module') },
  { path: 'checkout', loadChildren: () => loadRemoteModule('checkout', './Module') }
];