Accepted answer

Problem solved. Angular2 uses

<base href="/">

on the page, which fouls the path's ability to find url(#Arrow).

The solution is to add the marker attribute in d3.js and pre-pend the location.href:

renderArrows() {
    var arrows = d3.selectAll('path.arrow');

    arrows.each(function (d) {
      var path =;
      .attr('stroke-linecap', 'round')
      .attr('marker-end', function(d,i){ return "url(" + location.href + "#Arrow)" })

More information here: Using base tag on a page that contains SVG marker elements fails to render marker

Related Query