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;

Answer 2

Can you try these 2 options?

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

https://angular.io/cli/build

Answer 3

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 ie The image won't be fetched since the assets folder is missing in dist. Now a possible solution to this problem is-

1. Publish your image online and use that link as the img src URL in the CSS file and delete the image from asset file.
2. 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", ],