title: Distributed Angular UI Architecture
body: <p>Need some architecture assistance.</p>
  <p>My app is a &quot;hub&quot; with some functionality and I am wanting to provide an onboarding process for other teams to extend our UI. Teams are looking to create extensions of the hub and use the features the hub provides while also leveraging the primary hub domain. My app is currently written using Angular. What I am hoping to accomplish is the following:</p>
  <ol>
  <li>My team maintains the central &quot;hub&quot; repository.</li>
  <li>Other teams, when wanting to contribute to my app, creates their own project and maintains their own repository.</li>
  <li>The &quot;hub&quot; routes can be dynamically updated to point to new contributions without requiring a deployment of the &quot;hub&quot; application. The &quot;hub&quot; domain will remain, but load in the contributed app under the assigned route.</li>
  <li>Other teams can update their repository and deploy their changes on their own cadence. The &quot;hub&quot; app will reflect those new changes on a reload of the page.</li>
  <li>(Preferably) the page does not need to redirect to the contributed pages.</li>
  </ol>
  <p>The questions I have are:</p>
  <ol>
  <li>Is this possible with Angular?</li>
  <li>If it is possible, is it a good approach?</li>
  <li>If it is not a good approach, is there a better one that can allow dynamic, distributed contributions to a central UI?</li>
  <li>If it is not possible with Angular, is it possible with another framework? If so, what would that look like?</li>
  </ol>
  <p>My goal is to not require other teams to have intimate knowledge with the &quot;hub&quot; app in order to extend to the UI. I also want to avoid deploying the &quot;hub&quot; app being a bottleneck for other contributions. I'm hoping something like this is possible.</p>
  <p>Thanks for the input. I know it's a lot...</p>