Angular 2+ - Set base href dynamically
<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>