7

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?

enter image description here

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

0

5 Answers 5

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

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

Comments

3

try this

create img folder inside assets

and use path like ./assets/img/your_image

it will work.

2 Comments

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
It doesn't work. ng-cli only copies those files referenced, not the full folder or subfolders.
1

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 :

  1. Move the files in the dedicated folder (resources in my example)
  2. 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"
  }
}

Comments

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"],

2 Comments

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.
This don't work. ng-cli does not copy the full folder, only those file that are needed.
0

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

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.