Menu
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'">
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
352
asked Jun 24 '19 12:06
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.
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.
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.
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.
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.
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...
94
answered Oct 21 '22 08:10
I think I found the issue:
So I think the culprit is the path: "D:\Gitprojects (GitHub)\angular-test\myTestApp"
34
answered Oct 21 '22 07:10
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With