Angular 5 - Failed to load resource: the server responded with a status of 404 (Not Found)

Question

I'm trying to get a svg image from a package in node_modules, I installed from my private local npm registry, the package downloaded and exists under my node_modules of the project, my html code is like this

<img src="/src/assets/images/my-image.svg">

as I use a little script in angular-cli.json file to pass assets from node_modules to this local assets folder. and I have the "Failed to load resource: the server responded with a status of 404 (Not Found)" I verified that the image exists on node_modues and I can preview it, i'm using angular/cli 1.6.8

Update:

Angular doesn't access assets on node_modules folder, but I find a way how to do it, by using this code:

"assets": [
    { "glob": "**/*",
      "input": "../node_modules/my-private-package.assets/",
      "output": "./assets/" },
    "assets",
    "favicon.ico"
  ]

In the angular-cli.json, but still cannot access these assets and still says same error.

what's your path to the html in which you are trying to get this module?. pretty sure that your svg is not loaded because of wrong path. — Vinko Vorih, Mar 28 '18 at 12:41
@Roysh when I use it locally it works. but this is not the purpose — getName, Mar 28 '18 at 12:44
i don't think you're suppose to load svgs this way. however, you have some syntax issues -> `<\img` should be ` — Roysh, Mar 28 '18 at 12:47
@haifzhan I added the backslash, just to show the code, as it's html, it's gonna be interpreted by the browser — getName, Mar 28 '18 at 12:48
@VinkoVorih I verified the path, used the absolute and the relatif one and didn't work, and i'm using an IDE that generate the path automatiacally, so nowrong path — getName, Mar 28 '18 at 12:48
@Roysh if you put squared brackets you are binding some variable from typescript and that is automatically wrong. — Vinko Vorih, Mar 28 '18 at 12:51
can you share actual structure and settings of you app? so we can understand actually what is wrong — Kaushik Andani, Mar 28 '18 at 12:52
Angular only points to src/assets folder, nothing else is public to access via URL. — Vikas, Mar 28 '18 at 12:53
@Vikas thanks vikas, is there another way to make this accessible, as i want to use local packages to share same assets to multiple applications !!! — getName, Mar 28 '18 at 12:57
Refer this https://github.com/angular/angular-cli/wiki/stories-asset-configuration — Vikas, Mar 28 '18 at 12:59

score 2 · Answer 1 · answered Mar 28 '18 at 12:57

The node_modules folder is for dependencies, not assets (like an svg) that you are using in your application.

Try putting the image file in the assets folder then link to it like this:

<img src="/assets/my-image.svg">

I.E. when you run ng build, the angular CLI will compile your files in a dist folder. Notice the assets folder is in there. The node_modules folder is not.

Hitesh Kansagara · Answer 2 · 2018-03-28T13:38:16.340

1

I found the issue with your source. node_modules is outside of the src folder. It should be ../node_modules. try below code,

<img src="../node_modules/my-private-packages/images/my-image.svg">

edited Mar 28 '18 at 13:38

answered Mar 28 '18 at 12:46

Hitesh Kansagara

3,308
3
17
32

Not possible, Angular only points to src/assets folder, nothing else is `public` to access via URL. – Vikas Mar 28 '18 at 12:52
why do so ?? it won't work as node_modules is in the root folder – getName Mar 28 '18 at 12:52
have you seen this https://stackoverflow.com/questions/40230473/how-to-serve-up-images-in-angular2 – Vikas Mar 28 '18 at 12:57
Please stop adding salutations to your posts, see e.g. https://meta.stackexchange.com/q/2950/248731 – jonrsharpe Mar 28 '18 at 13:36

score 0 · Answer 3 · answered Mar 28 '18 at 13:37

0

Here is the best way to get the image.

<div>
    <img src="assets/images/dashboard.svg">
</div>

answered Mar 28 '18 at 13:37

Angular 5 - Failed to load resource: the server responded with a status of 404 (Not Found)

3 Answers3