Angular 7 how to specify folder for images in dist

Question

When I build project by ng build command in dist folder I got my js files both with all other resources, but I want to move all images and fonts in separate folder like assets. Can anybody help me?

Update: angular.json "assets": [ "src/favicon.ico", "src/assets" ],

in scss of component I have:

background-image: url('assets/img/no-notifications.svg');

but in result I got in dist folder next file:

no-notifications.7e08682a570485d1c108.svg

Goal is keep image path same as he has been specified in scss file: assets/img/no-notifications.svg

Shino · Accepted Answer · 2019-03-06 12:50:25Z

12

If you didn't already know, a new option was added into angular cli configuration (since v7.2.1) to copy css resources into another folder (relative to the output path).

"outputPath": "wwwroot",
"resourcesOutputPath": "images"

https://angular.io/cli/build

answered Mar 6, 2019 at 12:50

Shino

1312 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Bhargav Chudasama · Accepted Answer · 2018-12-07 10:03:13Z

3

try this

create img folder inside assets

and use path like ./assets/img/your_image

it will work.

answered Dec 7, 2018 at 10:03

Bhargav Chudasama

7,2356 gold badges24 silver badges41 bronze badges

2 Comments

Svyatoslavik Over a year ago

I't doesn't work: I got an error that path can't be resolved, when I use assets/img/your_image (without ./ prefix) it's works but files put into root of dist folder

Josep Alacid Over a year ago

It doesn't work. ng-cli only copies those files referenced, not the full folder or subfolders.

Moussa · Accepted Answer · 2019-08-21 08:29:09Z

The given solution "resourcesOutputPath": "images" works fine for image. But unfortunately if we need to do the same for other resources like *.js or *.ttf files etc... it will not work.

Here is how I do that for *.js files : in the file package.json, below the scripts node, I add a script called postbuild that will :

Move the files in the dedicated folder (resources in my example)
Search and replace <script src="*.js"></script> in index.html by <script src="resources/*.js"></script>. The search and replace is done with sed commande line (please be aware that there are some difference with sed commande lin on linux or MacOS).

Here is the final look of my package.json file :

{
  "name": "my-project",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve --proxy-config proxy.conf.json",
    "build": "ng build",
    "postbuild": "mv ./dist/my-project/*.js ./dist/my-project/*.js.map ./dist/my-project/resources; sed -i -e 's/src=\"/src=\"resources\\//g' dist/my-project/index.html",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  }
}

Suresh Kumar Ariya · Accepted Answer · 2018-12-07 10:11:03Z

0

By default, using 'ng build' command 'assets' and their 'sub-folders' will be automatically copied to 'dist' folder. If you want to create another folder in the same root level, let say 'resources'.

In angular.json, there is 'assets' configuration where we can define 'src/resources'.

angular.json

"assets": ["src/resources"],

answered Dec 7, 2018 at 10:11

Suresh Kumar Ariya

9,8041 gold badge22 silver badges28 bronze badges

2 Comments

Svyatoslavik Over a year ago

I've same rule, but it's doesn't solve my problem, angular parse all css files and move all resources into root of output build folder.

Josep Alacid Over a year ago

This don't work. ng-cli does not copy the full folder, only those file that are needed.

Sasha Kalash · Accepted Answer · 2021-12-21 14:03:46Z

0

set "rebaseRootRelativeCssUrls": true in options of "build" of angular.json

answered Dec 21, 2021 at 14:03

Sasha Kalash

961 silver badge3 bronze badges

Collectives™ on Stack Overflow

Angular 7 how to specify folder for images in dist

5 Answers 5

Comments

2 Comments

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

2 Comments

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related