Angular 6 assets folder is not getting rendered on browser

Question

I'm learning angular, I'm trying to load the local images inside the assets folder into main.component.html and I have set the path correctly, while I do alt+click on the path it opens the image. But the image was not loaded on the browser.

The error I get

In the sources tab in chrome developer tools, there is no assets folder included

Here is my angular cli version

I tried this https://github.com/angular/angular-cli/issues/5268 but of no use, Someone please help Here is my angular.json file

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "game-of-thrones": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "app",
      "schematics": {},
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/game-of-thrones",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.css",
              "./node_modules/bootstrap/dist/css/bootstrap.min.css",
              "./node_modules/font-awesome/css/font-awesome.css"
            ],
            "scripts": [
              "./node_modules/jquery/dist/jquery.min.js",
              "./node_modules/bootstrap/dist/js/bootstrap.min.js"
            ]
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "game-of-thrones:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "game-of-thrones:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "game-of-thrones:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.spec.json",
            "karmaConfig": "src/karma.conf.js",
            "styles": [
              "src/styles.css"
            ],
            "scripts": [],
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ]
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "src/tsconfig.app.json",
              "src/tsconfig.spec.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    },
    "game-of-thrones-e2e": {
      "root": "e2e/",
      "projectType": "application",
      "architect": {
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "game-of-thrones:serve"
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": "e2e/tsconfig.e2e.json",
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    }
  },
  "defaultProject": "game-of-thrones"
}

Can you show exactly which url gives a 404 error? And did you restart ng serve after modifying the assets folder? — David, Jun 09 '18 at 06:14
@David Here is a link to what my folder structure is and the img tag I used in the code [link] (https://imgur.com/a/fpJQgL3), I have done restarting ng serve after modifying the assets folder, but nothing seems to work. — Avinash Dv, Jun 09 '18 at 06:24
Your path `/../../assets/books.jpg` looks incorrect. It should just be `/assets/books.jpg` If not, show the **rreal, final** URL failing from chrome's network tab — David, Jun 09 '18 at 06:32
@David I have tested it with `/assets/books.jpg` still no success, Final url failing in the sense the error that i get on console, if so I have attached it in the question, clicking on it takes me here [link] (https://imgur.com/a/z8q2EmL) — Avinash Dv, Jun 09 '18 at 06:43
You just showed the error in red, not. I want to see what url is called exactly for books.jpg in the network tab. If you click the failing ressource on network tab, a new pane pops up with the absolute URL called — David, Jun 09 '18 at 06:59
@David [link](https://imgur.com/a/czC1bZr) Here is the link to images related to it have a look — Avinash Dv, Jun 09 '18 at 07:13
Try modifying `angular.json` and set the asset like this: `"assets": [ "favicon.ico", "assets" ],` (to remove `src`) Then restart `ng serve` — David, Jun 09 '18 at 07:41
Found a solution to the above problem by removing all special characters,symbols to the folder location of the app, have a look at this [Git hub link](https://github.com/angular/angular-cli/issues/9852) — Avinash Dv, Jun 10 '18 at 05:47

score 5 · Accepted Answer · edited Sep 15 '18 at 06:03

5

I have the same problem

GET http://localhost:4200/assets/img/img.png 404 (Not Found)

but I fixed it by removing all the special character ('(','@','$' etc) in the project path. For example, if you have a project path like

C:\angular-projects(1)\angularapp

then change it to

C:\angularprojects1\angularapp

edited Sep 15 '18 at 06:03

Amarjit Singh

2,068
19
52

answered Sep 13 '18 at 03:55

Satinderpal Singh

549
3
16

1

@Satineder Bajwa Solved the problem long ago,This is what I followed before that worked, anyway thanks for taking your time to help me – Avinash Dv Sep 14 '18 at 04:53
@AvinashDv this is a community to help each other if you already found the answer then you should have posted an answer to your own question to help others. – Satinderpal Singh Sep 15 '18 at 05:56
@Satineder Bajwa I posted that, I found answer in comments of my question the very next day also given a link where I found the solution to the problem, I should post in the answer section will do it now, thank you – Avinash Dv Sep 16 '18 at 06:11

score 0 · Answer 2 · answered Jul 26 '18 at 07:21

0

Normally you need to prefix your base href in your index.html like that :

base href="/game-of-thrones/"

In order to look for the assets in the right folder.

answered Jul 26 '18 at 07:21

Thomas Guillot

13
3

score -2 · Answer 3 · edited Sep 16 '18 at 23:07

Found a solution to the above problem by removing all special characters,symbols to the folder location of the app, have a look at this Github issue.

For example, if your project is in E drive,

change this location

E:\Data\project - 1\Angular(learning)\app

to

E:\Data\project1\Angularlearning\app

You will then be able to see the loaded assets folder to the browser under sources tab in chrome developer tools.

Angular 6 assets folder is not getting rendered on browser

3 Answers3