angular 10: image url given from assets after `Ng build` is listing directly under `dist` folder and `dist->assets`

Question

I found one scenario where images are getting listed directly under the dist folder after ng build.

I have created a sample angular app. Below are the details. Even the image is there inside the assets folder. It is getting copied directly under dist. This way, its getting duplicated which also causes build size increase.

How to avoid this? I need the image only under assets folder. Outside should be clean. Please help if anyone faced a similar issue.

project structure

angular.json

"myapp": {
  "projectType": "application",
  "schematics": {
    "@schematics/angular:component": {
      "style": "scss"
    }
  },
  "root": "projects/myapp",
  "sourceRoot": "projects/myapp/src",
  "prefix": "app",
  "architect": {
    "build": {
      "builder": "@angular-devkit/build-angular:browser",
      "options": {
        "outputPath": "dist/myapp",
        "index": "projects/myapp/src/index.html",
        "main": "projects/myapp/src/main.ts",
        "polyfills": "projects/myapp/src/polyfills.ts",
        "tsConfig": "projects/myapp/tsconfig.app.json",
        "aot": true,
        "assets": [
          "projects/myapp/src/favicon.ico",
          "projects/myapp/src/assets"
        ],
        "styles": [
          "projects/myapp/src/styles.scss",
          "projects/myapp/src/assets/theme/victor-theme/style.scss"
        ],
        "scripts": []
      },
      "configurations": {
        "production": {
          "fileReplacements": [
            {
              "replace": "projects/myapp/src/environments/environment.ts",
              "with": "projects/myapp/src/environments/environment.prod.ts"
            }
          ],
          "optimization": true,
          "outputHashing": "all",
          "sourceMap": false,
          "extractCss": true,
          "namedChunks": false,
          "extractLicenses": true,
          "vendorChunk": false,
          "buildOptimizer": true,
          "budgets": [
            {
              "type": "initial",
              "maximumWarning": "2mb",
              "maximumError": "5mb"
            },
            {
              "type": "anyComponentStyle",
              "maximumWarning": "6kb",
              "maximumError": "10kb"
            }
          ]
        }
      }
    },

CSS

.tree_status_ico:disabled {
    opacity: 0.6;
    background-size: 18px;
    background: transparent url(assets/img/agg_status.svg) no-repeat center;
}

after ng build

yes image is there in Myapp -> src -> assets , but after the build it coming in dist -> assets -> img -> agg_status.svg and dist->agg_status.svg — Aji, May 26 '21 at 15:37

score 3 · Accepted Answer · answered Jun 01 '21 at 20:42

3

I created a test project using Angular 12 and it seems that it does have the same issue. But I found a solution that should work:

  background: transparent url("/assets/img/agg_status.svg") no-repeat center;

answered Jun 01 '21 at 20:42

julianpoemp

1,965
3
14
29

This is not the solution to question asked. – Puneet Jun 08 '21 at 05:06
@Puneet it's the solution to the question asked! He wants to prevent the image being copied next to the index.html file and that solution does it! AND it's approved by the questioner: "It is getting copied directly under dist. This way, its getting duplicated which also causes build size increase." Take back your downvote or explain your statement. – julianpoemp Jun 08 '21 at 14:56
How can you fix project directory structure using CSS code ? This is the question : "Below are the details. Even the image is there inside the assets folder. It is getting copied directly under dist. This way, its getting duplicated which also causes build size increase. How to avoid this? I need the image only under assets folder. Outside should be clean. Please help if anyone faced a similar issue." – Puneet Jun 08 '21 at 16:24
@aji can you explain how above solution resolved your issue? If the problem was displaying the image correctly and not fixing your project dir structure, please update your question and I can remove my downvote on answer and question. – Puneet Jun 08 '21 at 16:28
@julianpoemp after changing the url as "/assets/.." the image is only coming under dist/assets/image/... not coming directly under /dist. my problem solved with this approach. i did the up vote too background: transparent url(../src/assets/img/agg_status.svg) no-repeat center; this was giving image in dist/agg_status.svg – Aji Jun 08 '21 at 20:34

score 1 · Answer 2 · answered Jun 08 '21 at 04:13

1

Can you try these 2 options?

"outputPath": "dist", "resourcesOutputPath": "images"

https://angular.io/cli/build

answered Jun 08 '21 at 04:13

shailesh kanbi

39
4

jesvin palatty · Answer 3 · 2021-06-02T17:31:33.940

When you are doing ng build what angular CLI is doing is performing AOT(Ahead of Time compilation) and converting your angular app code to HTML, CSS, and JS. That's what your dist folder has. The image you have in the asset folder will be linked to the HTML IMG tag and in src property you will be providing the image path which will be 'assets/imgName.jpg'. Thus the section of the compiled code will also be using the same image source URL. Thus you cant get rid of that folder coz doing so your app will break i.e The image won't be fetched since the assets folder is missing in dist. Now a possible solution to this problem is-

Publish your image online and use that link as the img src URL in the CSS file and delete the image from asset file.
Alternatively remove the "projects/myapp/src/assets" line in the assets array from the angular.json file and build the app again but to avoid your app failing simply copy-paste the assets file to dist file before publishing.

The Asset Array if you follow solution 2 will be

"assets": [ "projects/myapp/src/favicon.ico", ],

the probelm is not to get rid of the assets folder, why the image coming inside and out side of assest folder, it should only comes under assets folder why its coming directly under dist folder, please see the image in question. also its not about img tag and src, its referred in CSS — Aji, Jun 02 '21 at 16:06

score 0 · Answer 4 · answered Aug 17 '23 at 09:20

0

You need to change the assets link in css file like this

.tree_status_ico:disabled {
    opacity: 0.6;
    background-size: 18px;
    background: transparent url('~/assets/img/agg_status.svg') no-repeat center;
}

answered Aug 17 '23 at 09:20

Hafizur Rahman

27
4

angular 10: image url given from assets after `Ng build` is listing directly under `dist` folder and `dist->assets`

4 Answers4