svg's won't load in production mode

Question

All my svg's work perfectly in dev mode, as soon as I run `ng build --prod --aot" they are not loading. They all fallback to the png image. I can't figure out how to fix it. I have been on github already, and tried

• absolute paths
• relative paths
• binding vs. interpolation

I'm using angular 4.4.3

and angular/cli 1.5.4

html:

<img
    class="chain"
    src="../assets/svgs/LinkWardenChain.svg"
    alt="Linkwarden chain graphic"
    onerror="this.src='../assets/images/LinkWardenChain.png'"
>

another example:

<img
    class="chain"
    [src]="ethernet1"
    alt="ethernet connected graphic"
>

*I cannot upgrade to angular 5 at the moment, due to 3rd party package support

SOLUTION

Thanks to Mathew for the answer, adding the file paths to the cli assets folder:

"assets": [
        "assets",
        "favicon.ico",
        "./src/assets/svgs/eth-100.svg",
        "./src/assets/svgs/eth-1000.svg",
        ...etc...
      ],

Circumscribe

Have you tried adding the svg files to the "assets" section in the CLI configuration file? – Tees

they are in the assets folder – Circumscribe

You have to manually add them as entries to the "assets" section in the CLI configuration file. Webpack might be moving the images to the bundles and rewriting the URLs. SVG files might not be moved but the URLs are rewritten. I think this might be known issue with that version of Angular. Keep in mind that this is a webpack problem. – Tees

hmm, alright, i'll give that a shot. it doesn't make sense to me, because the .png files work great, and they are not listed as assets in the cli file – Circumscribe

thanks @MathewFoscarini ! – Circumscribe

This didn't work for me unfortunately. What did end up worked for me was changing hosting providers from Google Cloud Storage Buckets to AWS S3 Bucket for my Angular app. And this solution didn't require adding the SVG paths to the assets array in Angular.json. – Rumania

Answer 1

I had shared svg icons stored in the apps/shared/assets/icons/*. For angular 14 this worked:

in angular.json:

"assets":[
...
    {
      "glob": "**/*",
      "input": "apps/shared/assets/",
      "output": "assets"
    }
]

the path to the icon in html:

src="assets/icons/connection.svg"

and added svg mime type on the server:

mimetype.assign = (
  ".html" => "text/html",
  ".txt" => "text/plain",
  ".jpg" => "image/jpeg",
  ".png" => "image/png",
  ".js" => "text/javascript",
  ".css" => "text/css",
  ".svg" => "image/svg+xml"
)

Suzettesuzi