Requests are not cached

[zygimantas]

ng-inline-svg: "8.0.0" angular: "6.0.6"

I haven't noticed with which version it happened, but SVG file is requested from the server multiple times in ngFor loop and I expect only 1 http request. Has anyone noticed that?

[cyphercodes96]

Confirmed, I have noticed that SVG files are not being cached and always fetched from server, i have a component with 52 SVG files, taking around 6-12 seconds to load every time that component is initialized

[zygimantas]

@arkon we need you help with this breaking change. Do you have any idea what happened?

[arkon]

Probably something related to this commit, but I haven't spent time looking into it.

[zygimantas]

I have created a reproduction of the bug: https://stackblitz.com/edit/angular-yrms1a

[arkon]

Should be fixed in v8.0.1.

[cyphercodes96]

Notice the header's, on reload, they are never cached and fetched, although the images, as you can notice, are saved inside the project assets folder. Problem: taking too much load time (6-10 seconds) on every loadup of my component

Idea's?

[zygimantas]

You have a checkbox "Disable cache" checked in dev tools.

[cyphercodes96]

This check-box is automatic, how can I uncheck / deselect it from my user's browser automatically through my staging system?

Also if you notice, even when i remove the disable cache checkbox, the svg image's are taking too much time to load, and they are still re-fetched with a GET method

[zygimantas]

Have you considered adding your 0...N.svg into a single svg file and reference them as symbols? In any case, 100 requests to a server is not the best thing. You browser will throttle your requests, as well as the server may do the same.

[cyphercodes96]

@zygimantas Not really, could you elaborate / explain more on your proposed idea? Your totally right regarding the requests and the browser throttle that might occur, and this is my main problem i'm trying to find a solution for.

[zygimantas]

Well, you can do that manually in Illustrator before exporting svg files, or you can search for something like "bundle svg files as symbols", I checked I there are few tools to do that. Once you will have a single svg file with all your current illustrations inside, you can include a specific illustration (symbol) like this: [inlineSVG]="'all.svg#symbol-id'". Check that main page: https://github.com/arkon/ng-inline-svg

[cyphercodes96]

@zygimantas thank you for the valuable information, never thought i could do that. I'll be looking further into this and do some research. Then i'll attempt to implement it for sure, see if it solves my issue :)

[arkon]

Note that the "cache" in this directive is just to prevent multiple requests to the same URL. It has nothing to do with HTTP caching.

[ibagaric]

With last release 8.0.1 I have problem with rxjs,

ERROR TypeError: rxjs_1.of is not a function at SVGCacheService.webpackJsonp../node_modules/ng-inline-svg/lib/svg-cache.service.js.SVGCacheService.getSVG (svg-cache.service.js:29)

rxjs version is 5.5.11

[tplk]

@ibagaric You can switch to rxjs-compat or even better - just upgrade to rxjs 6. Imports are different in rxjs 6.

[cyphercodes96]

@zygimantas @arkon I wanted to ask you guys and be sure about something, hope you could share your expertise in this.

If i bundle my 52 images into one svg image, symbolizing each image with a unique identifier. If a user clicks on that whole image, can i still detect on which subImage the user clicked? and still do certain action upon each one? Also if there is an existing example if a bundled symbol svg image with click functionalities you could share, would be awesome! Thanks!

[tplk]

@cyphercodes96 this is not related to the issue. Create a new one please.