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

Answer 1

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;