title: Angular: Dynamically setting base href to fix SVG breaks router navigation
body: <p>My Angular 7 app works fine if I have <code>&lt;base href="/"&gt;</code> in the <code>&lt;head&gt;</code></p>
  
  <p>However, this breaks all the SVG gradients in Safari, they render as solid black.  I have found many posts on this issue on SO and elsewhere, and the "solution" is to remove the base tag. But then all my routing and root-relative image srcs break (as expected).</p>
  
  <p>So I looked at the <a href="https://angular.io/api/common/APP_BASE_HREF" rel="nofollow noreferrer">Angular docs</a> at <code>APP_BASE_HREF</code> and tried the suggested code:</p>
  
  <pre><code>import {Component, NgModule} from '@angular/core';
  import {APP_BASE_HREF} from '@angular/common';
  
  @NgModule({
    providers: [{provide: APP_BASE_HREF, useValue: '/'}]
  })
  class AppModule {}
  </code></pre>
  
  <p>The images work, but when I build the project with Angular CLI and upload it to AWS, the router links fail after a few clicks (possibly some paths fail?).  No error in console, just no navigation.</p>
  
  <p>So I had to revert to putting the <code>base</code> tag in the head, but now my D3 chart gradients are all black in Safari.</p>