My Angular 7 app works fine if I have <base href="/">
in the <head>
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).
So I looked at the Angular docs at APP_BASE_HREF
and tried the suggested code:
import {Component, NgModule} from '@angular/core';
import {APP_BASE_HREF} from '@angular/common';
@NgModule({
providers: [{provide: APP_BASE_HREF, useValue: '/'}]
})
class AppModule {}
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.
So I had to revert to putting the base
tag in the head, but now my D3 chart gradients are all black in Safari.