Angular-cli: Image versioning not work correctly

[rawatsandeep670]

Versions

Versions / Env:
angular-cli: 6.0.8
node: 10.13.0
os: Window x64

Repro steps

The content of the src/ directory is as below:
src/
├── assets
│ ├── images
│ │ ├── assistance.png
│ │ ├── checked.png
│ │ ├── avatar.png
│ │ ├──table-desktop-blue.png
│ ├── fonts
│ │ ├──calibri.ttf
│ │ ├──cards21.ttf
├── app/
│ │ ├── home/
│ │ │ ├── home.module.ts
│ │ │ ├── rooms/
│ │ │ │ ├── rooms.component.html
│ │ │ │ ├── rooms.component.css
│ │ │ │ ├── rooms.component.ts
├── environments
├── index.html
├── styles.css
├── main.ts
├── favicon.ico

Build a production version. # ng build --prod --base-href=/myProject/
The content of the dist/ directory is as below: Notice that only two images hashed not all

dist/
├── assets
│ ├── images
│ │ ├── assistance.png
│ │ ├── checked.png
│ │ ├── avatar.png
│ │ ├──table-desktop-blue.png
│ ├── fonts
│ │ ├──calibri.ttf
│ │ ├──cards21.ttf
├── cards21.a3ca179e19afd9ff75c3.ttf
├── avatar.7b1f0eaea44dcf3ebaa5.png
├── table-desktop-blue.45bbb739b0ceafc92916.png
├── index.html
├── 1.9d5dbd91ee597bcea89c.js
├── common.8c9eaa448b01bdf489e1.js
├── main.d0df4fbb3790e577ce00.js
├── polyfills.1f682948bdc523f3cb0b.js
├── runtime.fb52e8a1c273f473121b.js
├── styles.8859be51ae08103a3fa6.css
├── favicon.ico

Noticeable Points:

• Only two images & one font are hashed not all.
• Images & fonts still appear in assets folder while these are hashed

I used all images in css file with background property

[alan-agius4]

Hi, from the output it looks like you might be copying those files.

Copied assets don’t get fingerprinted. Only assets that are referenced directly in the sheetsheets get fingerprinted because otherwise the filename name will be different from the filename referenced and will cause a 404 error.

[rawatsandeep670]

@alan-agius4 angular cli change file name inside css file too when i make build. image file name same as hashed file.

[alan-agius4]

Can you please share you angular.json and a snippet of the code where you are using assistance.png?

If the file is referenced directly in the stylesheet and not using the copying of assets feature (ie: the assets option in angular.json), indeed the during the build the paths will be processed and the filenames in the stylesheets are updated with the hash.

[rawatsandeep670]

angular.json

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "pokerCoach": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "",
      "schematics": {},
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/pokerCoach",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.css"
            ],
            "scripts": []
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "host": "0.0.0.0",
            "port": 4200,
            "browserTarget": "pokerCoach:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "pokerCoach:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "pokerCoach:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.spec.json",
            "karmaConfig": "src/karma.conf.js",
            "styles": [
              "styles.css"
            ],
            "scripts": [],
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ]
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "src/tsconfig.app.json",
              "src/tsconfig.spec.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    },
    "pokerCoach-e2e": {
      "root": "e2e/",
      "projectType": "application",
      "architect": {
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "pokerCoach:serve"
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": "e2e/tsconfig.e2e.json",
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    }
  },
  "defaultProject": "pokerCoach"
}

avatar.png

.seat-user-avataar{
    border-radius: 50%;
    width: 33%;
    height: 100%;
    background: url("../../../assets/images/avatar.png") no-repeat;
    background-size: cover;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
}

[alan-agius4]

So taking a look at your angular.json you are copying the following;

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

Meaning copy these files as they are to the dist folder. These will not get finger printed. Because the build pipeline is unaware where they are being used.

In your stylesheet you are referencing avatar.png with the relative path. Meaning that this will be processed by webpack, get fingerprinted/hashed and the path and your stylesheet gets updated with the correct path and the file emitted will be something like avatar.7b1f0eaea44dcf3ebaa5.png which is correct.

Having the above configuration and usages will result in outputting 2 files named avatar.png one of them being finger printed and the other one not.

Unless you are using your assets in template files or somewhere outside of the CSS pipeline you should not be adding your files to the assets fields, as it will result in files being outputted which are not used.

See https://github.com/angular/angular-cli/wiki/stories-asset-configuration

[rawatsandeep670]

thanks @alan-agius4, you are right stylesheet are referencing avatar.png with the relative path, but I used relative path for all images, so why only two images are hashed?
@alan-agius4 I work also with another project which also used relative path but not any single image hashed.

[alan-agius4]

@rawatsandeep670, only two images are being outputted hashed. Which means only 2 images are being used in the stylesheet.

When you say but I used relative path for all images, where are these images being used?

Re the other project, it might be the case that you are not specifying outputHashing in your angular.json

[rawatsandeep670]

@alan-agius4 All images are used in css files.

[alan-agius4]

Can you setup a minimal repro please?

You can read here why this is needed. A good way to make a minimal repro is to create a new app via ng new repro-app and adding the minimum possible code to show the problem. Then you can push this repository to github and link it here.

This might be related to your directory structure so its really important to get an accurate repro to diagnose this.

[rawatsandeep670]

@alan-agius4 please find Repo link below:
Image Version Issue Angular 6

@alan-agius4 Can you share alternate way if we need image versioning?

[alan-agius4]

I had a look at your reproduction and there are two things
1) checked.png is under 10kb which in CLI version 6 get embedded in the CSS using DataUri. This doesn't apply for Angular CLI version 7, which now gets emitted as well.
2) You are placing your css assets under the assets folder. These gets copied without fingerprinted, since you have the following in your angular.json

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

If you are using your assets directly in CSS, you don't need to add the above in your angular.json. Note that in your reproduction these files are not being used.

[sengfan]

why this closed?
So are you saying only image under 10k will be hashed? and will be put into the dist folder?

[sengfan]

I would like cli to hash the image, but is there any way to change the output path? like put them into the image folder under asset??

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}