What's new

Preloaded svg is being loaded again by Angular


Active member
Staff member
I'm just trying to preload a svg sprite in my angular application (index.html):

<link rel="preload" href="assets/img/logos/app_white_full.svg" as="image">
<link rel="preload" href="assets/icons/font/symbol-defs.svg" as="image" crossorigin>

The file "app_white_full.svg" is being loading once, great! But the other one, "symbol-defs.svb" wich is a svg sprite, is being loaded again by Angular (lines 3 and 8): enter image description here

The only difference between those calls that I could see is the Request Headers.

"symbol-defs.svg" from index.html has:

Sec-Fetch-Mode: cors

And "symbol-defs.svg" from an Angular component has:

Sec-Fetch-Mode: same-origin

I don't if it's the issue. Why the other file is ok?

Additionally, I got this message on the console log:

The resource http://localhost:8080/assets/icons/font/symbol-defs.svg was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate `as` value and it is preloaded intentionally.

Why it's not recognized as the same?

Please, if anyone can help me, I'll be very greatfull! Thanks in advance!

Continue reading...