Angular 8: assets not loading

4
votes

I'm trying to use (image) assets in a brand new angular (8.0.3) project. I've looked into the asset configuration from the docs. Judging by the information there it should work out of the box?

So I created an image folder and put a random .jpg image in there.

ls src/assets/images
paladin.jpg

ls src
app  assets  environments  favicon.ico  index.html  main.ts  polyfills.ts  styles.css  test.ts

angular.json (this is all default)

  "assets": [
              "src/assets",
              "src/favicon.ico"
            ],
            "styles": [
              "src/styles.css"
            ],
            "scripts": []

In index.html we have (also default)

<link rel="icon" type="image/x-icon" href="favicon.ico">

app.component.html (I changed the base64 logo with the assets image)

<img width="300" alt="Angular Logo" src="assets/images/paladin.jpg">

But nothing is loading or copies to the 'dist' directory.

The closest I've come to an answer are old threads:

ng serve
ng build

Same result...even favicon.ico isn't loading...

I've tried:

<img width="300" alt="Angular Logo" src="./assets/images/paladin.jpg">
<img width="300" alt="Angular Logo" src="assets/images/paladin.jpg">
<img width="300" alt="Angular Logo" src="../assets/images/paladin.jpg">
<img width="300" alt="Angular Logo" [src]="assets/images/paladin.jpg">
<img width="300" alt="Angular Logo" [src]="'assets/images/paladin.jpg'">

How to reproduce

ng new myTestApp
# => routing y/N doesn't matter
# => css option
ng serve --open

=> favicon gives 404

Am I missing something obvious here? :)

More info that might help:

$ ng version

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 8.0.3
Node: 10.16.0
OS: win32 x64
Angular: 8.0.2
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.800.3
@angular-devkit/build-angular     0.800.3
@angular-devkit/build-optimizer   0.800.3
@angular-devkit/build-webpack     0.800.3
@angular-devkit/core              8.0.3
@angular-devkit/schematics        8.0.3
@angular/cli                      8.0.3
@ngtools/webpack                  8.0.3
@schematics/angular               8.0.3
@schematics/update                0.800.3
rxjs                              6.4.0
typescript                        3.4.5
webpack                           4.30.0


$ npm list -g --depth=0
C:\Users\jonghena\AppData\Roaming\npm
`-- @angular/[email protected]

$ npm list --depth=0
[email protected] D:\Gitprojects (GitHub)\angular-test\myTestApp
+-- @angular-devkit/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @types/[email protected]
+-- @types/[email protected]
+-- @types/[email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
`-- [email protected]

Full angular.json: https://pastebin.com/HaeKmQZ0

2
angular
src="/assets/images/paladin.jpg" should work – Dimanoid
It sadly doesn't, I just tried it again. But is it normal that out of the box, favicon.ico gives a 404 without me even changing any code ? – Joris Onghena
No it's not. After creating an app you could access to the favicon through http://localhost:4200/favicon.ico and to the image like this: <img src="assets/images/paladin.jpg" />. Did you change some Angular configuration? – youri
So, after you do 'ng build --prod', and then look into the dist folder, you do not see an assets folder there? – Mathias
@Mathias my full angular.json: pastebin.com/HaeKmQZ0 like i said I havn't touched it but I do see now that there are 2 sections, both are the same. – Joris Onghena

2 Answers

4
votes

It seems to be due to the parentheses in your workspace path: D:\Gitprojects (GitHub)\angular-test\myTestApp.

I don't know if the issue is reported in Angular's Github, but I suggest to check and report it.

As a workaround, you can remove your parentheses from your workspace path...

3
votes

I think I found the issue:

  • 'my test' => works
  • 'my test(12)' => doesn't work
  • myTestApp2 => works

So I think the culprit is the path: "D:\Gitprojects (GitHub)\angular-test\myTestApp"