web-dev-qa-db-ja.com

Angular 7 distで画像のフォルダを指定する方法

distフォルダーで_ng build_コマンドを使用してプロジェクトをビルドすると、jsファイルが他のすべてのリソースとともに取得されましたが、assetsのような別のフォルダーにすべての画像とフォントを移動したいと思います。誰かが私を助けてくれますか？

enter image description here

更新：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_

angularangular7
4
Svyatoslavik

まだわからない場合は、新しいオプションがangular cli構成（ v7.2.1 以降）に追加され、cssリソースを別のフォルダーにコピーします（出力パス）。

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

https://angular.io/cli/build

9
Shino

これを試して

img内にassetsフォルダを作成します

./assets/img/your_imageのようなパスを使用します

それが動作します。

2
Bhargav Chudasama

与えられたソリューション"resourcesOutputPath": "images"は、画像に対して適切に機能します。しかし、残念ながら*.jsや*.ttfファイルなどの他のリソースについても同じようにする必要がある場合は、機能しません。

*.jsファイルに対してこれを行う方法は次のとおりです。ファイルpackage.jsonのscriptsノードの下に、次のようなpostbuildというスクリプトを追加します。

  1. 専用フォルダー（この例ではresources）にファイルを移動します
  2. <script src="*.js"></script>のindex.htmlを検索して<script src="resources/*.js"></script>に置き換えます。検索と置換はsedコマンドラインで行われます（LinuxまたはMacOSのsedコマンドラインとはいくつかの違いがあることに注意してください）。

これが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"
  }
}
1
Moussa

デフォルトでは、「ng build」コマンド「assets」とその「サブフォルダ」を使用すると、「dist」フォルダに自動的にコピーされます。同じルートレベルに別のフォルダを作成する場合は、「リソース」と言います。

Angular.jsonには、「src/resources」を定義できる「assets」構成があります。

angular.json

"assets": ["src/resources"],
1
Suresh Kumar Ariya