0

In my app I generate svg sprite with gulp-svgstore and then I loaded in the index.html in angular2-cli app with ajax call

<script>
  var ajax = new XMLHttpRequest();
  ajax.open("GET", "./assets/images/icon/sprite.svg", true);
  ajax.send();
  ajax.onload = function() {
    var div = document.createElement("div");
    div.setAttribute("class", "sprites");
    div.innerHTML = ajax.responseText;
    document.body.insertBefore(div, document.body.childNodes[0]);
  };
</script>

and then I wrote a component for svg icon :

import { Component, Input } from '@angular/core';

@Component({
  selector: 'icon',
  template: `<svg class="icon" [style.width.px]="size" 
                               [style.height.px]="size" 
                               [style.fill]="fill"
                               [ngClass]="class">
                               <use [attr.xlink:href]="'#' + name"></use></svg>`
})
export class IconComponent {
  @Input() name: string;
  @Input() size: any;
  @Input() fill: any;
  @Input() class: any;
  @Input() marginLeft: any;

  constructor() { }

}

and this work just fine in Chrome or Safari browser, but in Firefox it doesn't show up without any error or warning! when I checked network tab in Firefox look like a sprites file loaded but still doesn't show up!

enter image description here

How can I fix this issue? why Firefox act like that?

Thanks a lot.

Dark star
  • 5,192
  • 9
  • 35
  • 54
  • Because by default angulat sticks a base tag into the markup which screws with url resolution. – Robert Longson Feb 26 '17 at 08:36
  • @RobertLongson hum. so how can I fix it? – Dark star Feb 26 '17 at 08:38
  • @RobertLongson the link you posted was about angular1 not 2!! why you marked question as duplicate? I still don't know what should I do for solve this issue!! – Dark star Feb 26 '17 at 08:51
  • 1
    How about this one: http://stackoverflow.com/questions/39229027/angular2-rc5-fusion-charts-with-routing-not-working-because-of-base-href-tag There's plenty of questions like it. – Robert Longson Feb 26 '17 at 08:53

0 Answers0