Angular 7 how to specify folder for images in dist

问题

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

回答1:

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

回答2:

try this

create img folder inside assets

and use path like ./assets/img/your_image

it will work.

回答3:

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"
  }
}

回答4:

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

来源：https://stackoverflow.com/questions/53667212/angular-7-how-to-specify-folder-for-images-in-dist

标签

angular

angular7