how to ng-include an svg with webpack

Question

I include my svg using

<div ng-include="'src/assets/arrowdown.svg'"></div>

This works correctly when using npm run dev with that:

webpack-dev-server --https --host 0.0.0.0

But when I use a build, the svg that has been included using ng-include are not processed.

With other svg, used as classic resource, they are read at build time, their name is changed to handle versionning and output look like this:

background: url(//assets.mysite.com/build/4341cb2ee439f765105fb3258df4048c.svg) 50% no-repeat

When using ng-include the final build looks like this:

GET https://assets.mysite.com/src/assets/img/arrowdown.svg 404 (Not Found)

So the svg is not read by the loader

What should I do to make webpack detect the ng-include and extract the svg in the resources ?

Thanks

Using angularjs 1.5.5 with webpack 1.13.2.

Answer 1

After trying different method, I finally had something that work.

Just putting this here in case someone has no better idea.

I created a simple service that contains the svg inline.

Loading a resource like this:

<span ng-include="loadSvgResource('count')"></span>

In the controller:

this.loadSvgResource = function(d) {
    return svgResourceService[d];
};

The service contains the inline svg:

this.count= "data:image/svg+xml,...";

It is not much but it's honest work that works with my current constraints.