Search code examples
angularfirebasecachinghash

Angular - Prod Build not generating unique hashes

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.

Solution

  • 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",
]