Angular 8: assets not loading

Question

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:

• Angular 5 images not loading from assets directory
• Assets folder issue

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

Solution 1

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...

Solution 2

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"

Comments

[youri]

Yes, that's it (as I answer just before you :)). It seems to be resolved in Angular 6 github.com/angular/angular-cli/issues/9852... Maybe you should reopen an issue on Github.

[Joris Onghena]

Indeed I just tried it and it fails with those "special characters" in the path.

[Joris Onghena]

I've updated the issue on GitHub. At the very least I hope it saves someone a headache.

[Leponzo]

@youri, just wondering: if it was resolved in Angular 6 like you said, how did OP have a problem with it in Angular 8? Regression bug?