16

Angular production build is not generating unique hashes in my project.

Below are the build logs screenshot

enter image description here

Not able to reproduce this issue in new angular cli project, seems there is some issue in my project.

I am using angular - 6.0.3

Below is the angular.json

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "exampleProject": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "app",
      "schematics": {
        "@schematics/angular:component": {
          "styleext": "scss"
        }
      },
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/exampleProject",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
              {
                "glob": "**/*",
                "input": "src/assets",
                "output": "/assets"
              },
              {
                "glob": "favicon.ico",
                "input": "src",
                "output": "/"
              },
              {
                "glob": "sitemap.xml",
                "input": "src/assets",
                "output": "/"
              },
              {
                "glob": "googled41787c6aae2151b.html",
                "input": "src/assets",
                "output": "/"
              },
              {
                "glob": "CNAME",
                "input": "src/assets",
                "output": "/"
              }
            ],
            "styles": [
              {
                "input": "node_modules/@angular/material/prebuilt-themes/indigo-pink.css"
              },
              "src/assets/css/reset.css",
              "src/assets/css/loading.css",
              "src/styles.scss",
              "node_modules/angular-bootstrap-md/scss/bootstrap/bootstrap.scss",
              "node_modules/angular-bootstrap-md/scss/mdb-free.scss"
            ],
            "stylePreprocessorOptions": {
              "includePaths": [
                "src/styles"
              ]
            },
             "scripts": [
              "src/assets/js/modernizr.js",
              "src/assets/js/gtm.js"
              
            ]
          },
          "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,
              "baseHref": "/",
              "serviceWorker": true
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "exampleProject:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "exampleProject:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "exampleProject: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": [
              "src/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/**"
            ]
          }
        }
      }
    },
    "exampleProject-e2e": {
      "root": "e2e/",
      "projectType": "application",
      "architect": {
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "exampleProject:serve"
          },
          "configurations": {
            "production": {
              "devServerTarget": "exampleProject:serve:production"
            }
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": "e2e/tsconfig.e2e.json",
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    }
  },
  "defaultProject": "exampleProject"
}

Please let me know what I am doing wrong, Or provide any work around.

EDIT:

I have tried

ng build --aot --output-hashing=all
ng build --output-hashing=all

Still this produce same hashing for script.js, even after changing content in typescript or html.

Read this before reading the answers

I had an issue in firebase not angular, I misunderstood that compiled code will be bundled as scripts.js but no, the bundled code is in main.js.

My real issue was

I had a firebase cache rule and even after disabling it, it was still loading from the cache for users who previously visited my application, So I deleted and created a new firebase project which solved my issue.

Sameer
  • 4,758
  • 3
  • 20
  • 41

4 Answers4

7

There are plenty of other people that face the same issue with you. Check Here.

I don't think you'll find a solution to your problem if there isn't one on the official angular cli github, but based on the replies, can you please try updating your congifuration with the following and let me know if it works?

      "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
        }
      }

Edit: Expected files to change

Your actual code is only in main.js (which I can see gets a new hash). The rest of the files will seldom change. Check what the files mean here

main.js contains all our code including components (ts, html and css codes), pipes, directives, services and all other imported modules (including third party).

scripts.js contains the scripts we declare in the scripts section of angular.json file

"scripts": [
   "myScript.js",
]
Athanasios Kataras
  • 25,191
  • 4
  • 32
  • 61
  • 1
    My current **angular.json** file includes the code you provided, I have already added full code of my angular.json in the question. Still Hashes are identical – Sameer Nov 19 '19 at 10:41
  • You ARE changing the content right? If the code remains the same, then no new hashes are generated (by design). – Athanasios Kataras Nov 19 '19 at 11:07
  • 1
    Ya! I am aware of **"hashes are changed per bundled content, not per build"**, I changed lot of code/content still same output/hashes – Sameer Nov 19 '19 at 11:19
  • Then I'd just go with updating my cli, as this looks like a recurring problem in some versions. – Athanasios Kataras Nov 19 '19 at 11:23
  • By the way, in your example images, there are new hashes generated for the main and polyfill. You haven't missed that, right? Only main js makes sense to change, as well as the lazy loaded modules. – Athanasios Kataras Nov 19 '19 at 11:27
  • What about **script.js** – Sameer Nov 19 '19 at 11:35
  • Thank you for your quick reply, So this seems to be another cache issue not related to angular build hashing – Sameer Nov 19 '19 at 11:49
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/202641/discussion-between-sameer-khan-and-athanasios-kataras). – Sameer Nov 19 '19 at 11:56
  • It's terrible they can even reopen the issue. No one knows how to fix this and it's been an issue for so long. Why even lazy load modules if it causes this many problems. – Collin Nov 14 '22 at 22:12
0

If you are using Angular 7+ then you can use the command given below

ng build --configuration production --output-hashing all

Make sure you have the configuration set in your angular.json file.

TheHunter Shergill
  • 792
  • 5
  • 24
AtLeastTheresToast
  • 327
  • 6
  • 18
0

The main issue i observed is hash only changes when we make any code changes in application. but for styles and polyfills the tag is same.

Initial Chunk Files Names Size
main-es5.4daebf996f3ead829477.js main 759.75 kB
main-es2015.4daebf996f3ead829477.js main 682.24 kB
styles.427122a7a8ba74646062.css styles 477.01 kB
polyfills-es5.d7b40cf62085282501b1.js polyfills-es5 131.97 kB
polyfills-es2015.2823b1a5ccf71efe2bde.js polyfills 36.11 kB
runtime-es2015.a4dadbc03350107420a4.js runtime 1.45 kB
runtime-es5.a4dadbc03350107420a4.js runtime 1.45 kB

Build at: 2022-06-06T09:50:45.524Z - Hash: 5658eef36186f2e20989 - Time: 150810ms

Initial Chunk Files Names Size
main-es5.d9483ea4d4880b3e0771.js main 759.67 kB
main-es2015.d9483ea4d4880b3e0771.js main 682.15 kB
styles.427122a7a8ba74646062.css styles 477.01 kB
polyfills-es5.d7b40cf62085282501b1.js polyfills-es5 131.97 kB
polyfills-es2015.2823b1a5ccf71efe2bde.js polyfills 36.11 kB
runtime-es2015.a4dadbc03350107420a4.js runtime 1.45 kB
runtime-es5.a4dadbc03350107420a4.js runtime 1.45 kB

Build at: 2022-06-06T09:54:59.714Z - Hash: 2431d248bc6f790fcb91 - Time: 145432ms

Vamsi kalyan
  • 21
  • 2
0

I have found this issue in my project(Angular cli 14.2.10, I have upgraded from 13v) and I have realized one important thing: If I change app.component.html|ts or other components related to this component and after building my project, The name of hashed files are differently from previous hashed files. But If I change other components and then build my project, The hash value of Generated files are the same with previous hash value. So for this case the solution is doing some unnecessary change in app.component.

Odilbek Utamuratov
  • 143
  • 1
  • 8