title: Angular and Micro-Frontends
body: <p>I am doing some research on how to split a huge single-page-monolith into a micro-frontend architecture.</p>
  
  <h1>The idea:</h1>
  
  <ul>
  <li>the page consists of several components which would be running autonomously</li>
  <li>each component is managed by one dev-team</li>
  <li>each team can change, update and deploy their components without breaking components of other teams</li>
  <li>each team chooses its own toolstack</li>
  </ul>
  
  <h1>The reason</h1>
  
  <p>To efficiently develop large applications you need to have many people working on it. However the number of developers per app/team does not scale well. Parallel development of multiple independent apps by independent teams however can be scaled arbitrarily</p>
  
  <p>With this in mind it is imperative that teams can choose their own toolstack and especially perform independent version-upgrades of third party-libraries (like angular, react, jquery). If this was not the case a framework-update would need to be compatible with every single component before you could deploy it to production.</p>
  
  <h1>Does this work with Angular?</h1>
  
  <p>While independent version-upgrades are necessary, it would be reasonable to restrict the teams to a few supported frameworks (Angular, React, Vue, Polymer...) and for now I try to build a demo purely consisting of Angular-Apps.</p>
  
  <p>However even though Angular 5 is supposedly a platform-framework which supports huge multi-module apps, it seems to be almost impossible to have several independent angular-apps running in the same browser window.</p>
  
  <p>I managed to bootstrap several Angular-Apps (different versions, each hosted on its own server) on a single webapp by utilizing HTML-Imports. However there are several <code>global</code> dependencies which need to be shared between apps</p>
  
  <ul>
  <li>zone.js can only be started once</li>
  <li>routing requires url-changes</li>
  <li>Browser-stuff like cookies, sessionstorage, etc...</li>
  </ul>
  
  <p>There are several articles in the net on how to bootstrap multiple angular-modules but they all refer to multiple modules in the same core-app, which in turn means they all are running on the same framework-version and an update means you have to rebuild and deploy the whole monolith.</p>
  
  <p><strong>Is there any solution other than "<code>iframes</code>" to get multiple Angular (5) Apps running on the same Page?</strong></p>