2

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.

3
  • 1
    Did you ever find a way around this? linear-gradients referenced by url() in an SVG still break in Angular 10 when the router navigates :(
    – hevans900
    Aug 7, 2020 at 10:27
  • It would seem this way fixed in a newer version of Safari. We no longer has the problem.
    – Steve
    Aug 7, 2020 at 11:40
  • 1
    This is currently happening on the latest version of Chrome, sorry I missed that you were talking specifically about Safari.
    – hevans900
    Aug 10, 2020 at 8:39

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Browse other questions tagged or ask your own question.