Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Angular 8: assets not loading

Tags:

angular

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

like image 352
Joris Onghena Avatar asked Jun 24 '19 12:06

Joris Onghena


People also ask

What is asset folder in angular?

The Angular application has a default assets folder. By default, whatever you put in the assets folder you can access it directly from the browser and queried through an HTTP request. You can create your own folder like assets by adding that folder to the assets section in the angular. json file.

What is the use of assets array in angular CLI?

NB: By adding an assets array for a specific build environment i.e. production, Angular CLI will ignore all assets specified for all environments and use only those specified for that environment only. In the previous section we were focusing on general assets, but let’s now focus only on stylesheets and scripts.

Can I add my own assets to my angular project?

You can add your own assets, relative to the root of your Angular workspace. The above assets will apply to both development and production builds of your app. But if you wanted, you can also have different assets for each deployment environment in Angular too.

Can I have different assets for each deployment environment in angular?

But if you wanted, you can also have different assets for each deployment environment in Angular too. For instance, if you had a different logo for each build environment, you might want the logo to be copied in the same exact location, in each environment, to make it easier to reference to it.

What resources do I need to build an angular app?

The three (Assets, Styles and Scripts) cover all the resources you might need for your Angular app. We will cover common scenarios in which you might come across while working with web resources for your project. Let’s start with assets, this could be anything from images, videos, json files to styles and scripts.


2 Answers

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

like image 94
youri Avatar answered Oct 21 '22 08:10

youri


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"

like image 34
Joris Onghena Avatar answered Oct 21 '22 07:10

Joris Onghena