title: Angular 2+ - Set base href dynamically
body: <p>We have an enterprise app that uses Angular 2 for the client. Each of our customers has their own unique url, ex: <code>https://our.app.com/customer-one</code> and <code>https://our.app.com/customer-two</code>. Currently we are able to set the <code>&lt;base href...&gt;</code> dynamically using <code>document.location</code>. So user hits <code>https://our.app.com/customer-two</code> and <code>&lt;base href...&gt;</code> gets set to <code>/customer-two</code>...perfect!</p>
  
  <p>The problem is if the user is for example at <code>https://our.app.com/customer-two/another-page</code> and they refresh the page or try to hit that url directly, the <code>&lt;base href...&gt;</code> gets set to <code>/customer-two/another-page</code> and the resources can't be found.</p>
  
  <p>We've tried the following to no avail:</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
    &lt;script type='text/javascript'&gt;
      var base = document.location.pathname.split('/')[1];
      document.write('&lt;base href="/' + base + '" /&gt;');
    &lt;/script&gt;
  
  ...
  </code></pre>
  
  <p>Unfortunately we are fresh out of ideas. Any help would be amazing.</p>