Angular 7, как указать папку для изображений в дист

Question

Когда я строю проект с помощью команды ng build в папке dist, я получаю файлы js как со всеми другими ресурсами, но я хочу переместить все изображения и шрифты в отдельную папку, например assets.Кто-нибудь может мне помочь?

Обновление: angular.json "assets": [ "src/favicon.ico", "src/assets" ],

в scss компонента у меня есть:

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

но в результате я получил в папке dist следующий файл:

no-notifications.7e08682a570485d1c108.svg

Цель - сохранить путь к изображению таким же, как он был указан вфайл scss: assets/img/no-notifications.svg

Answer 1

Данное решение "resourcesOutputPath": "images" отлично работает для изображения.Но, к сожалению, если нам нужно сделать то же самое для других ресурсов, таких как *.js или *.ttf файлы и т.д ..., это не будет работать.

Вот как я это делаю для *.js файлов: в файл package.json, ниже узла scripts, я добавляю скрипт с именем postbuild, который будет:

1. Переместите файлы в выделенную папку (resources в моем примере)
2. Найдите и замените <script src="*.js"></script> в index.html на <script src="resources/*.js"></script>.Поиск и замена выполняются с помощью sed строки комманд (обратите внимание, что есть некоторая разница с sed commande lin на Linux или MacOS).

Вот окончательный вид моего package.json файл:

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

Answer 2

По умолчанию при использовании команды ng build 'assets' и их «подпапки» будут автоматически скопированы в папку «dist».Если вы хотите создать другую папку на том же корневом уровне, скажем, «resources».

В angular.json есть конфигурация «assets», в которой мы можем определить «src / resources».

angular.json

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

Answer 3

Если вы еще не знали, в конфигурацию angular cli была добавлена ​​новая опция (начиная с v7.2.1 ) для копирования ресурсов CSS в другую папку (относительно пути вывода).

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

https://angular.io/cli/build

Answer 4

попробуйте

создать img папку внутри assets

и использовать путь как ./assets/img/your_image

, это будет работать.