Ability to generate hash on every build without changing file

[anuj-scanova]

Command

build

Description

Using Angular 17 and Cloudflare for caching. I have started noticing that after every deployment in the production, the page comes black until the caching period is over.

When visiting the built script js file, it gives a 404 page, but after appending a query to the URL, it is working fine

# not working
https://app.example.io/runtime.4bc2f68e0b409d29.js

# Working
https://app.example.io/runtime.4bc2f68e0b409d29.js?v9.0.1

I tried checking generating build after making changes to the file but the file name generated is always the same

Also tried passing --output-hashing all to the build command but the file names are still the same.

One way to implement Cache Businting is by appending query parameters to build every time but is there any angular way to do it?

Following is the angular.json content.

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "example-app": {
      "projectType": "application",
      "schematics": {
        "@schematics/angular:component": {
          "style": "scss"
        }
      },
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/example-app",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": [
              "zone.js"
            ],
            "tsConfig": "tsconfig.app.json",
            "inlineStyleLanguage": "scss",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/assets/vendor/nucleo/css/nucleo.css",
              "src/styles.scss"
            ],
            "scripts": [],
            "allowedCommonJsDependencies": [
              "@toast-ui/editor-plugin-chart",
              "@toast-ui/editor-plugin-color-syntax",
              "@toast-ui/editor-plugin-uml"
            ]
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "1mb",
                  "maximumError": "2mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "2kb",
                  "maximumError": "5kb"
                }
              ],
              "outputHashing": "all",
              "sourceMap": {
                "scripts": true
              }
            },
            "development": {
              "buildOptimizer": false,
              "optimization": false,
              "vendorChunk": true,
              "extractLicenses": false,
              "sourceMap": true,
              "namedChunks": true
            }
          },
          "defaultConfiguration": "production"
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "configurations": {
            "production": {
              "buildTarget": "example-app:build:production"
            },
            "development": {
              "buildTarget": "example-app:build:development"
            }
          },
          "defaultConfiguration": "development"
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "buildTarget": "example-app:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "polyfills": [
              "zone.js",
              "zone.js/testing"
            ],
            "tsConfig": "tsconfig.spec.json",
            "inlineStyleLanguage": "scss",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.scss"
            ],
            "scripts": []
          }
        }
      }
    }
  }
}

Using ng build to build the project. And here are the screenshots of the build generated by changing the version number to 0.0.1, 1.0.1, and 1.0.2 respectively.

The file names of main.xxx.js, runtime and polyfills files are the same.

A similar issue has been reported here

#3769 (comment)

This is very frustrating as the customers repeatedly keeps reporting of unresponsive application after every deployment.

Describe the solution you'd like

Ability to change the hash of the generated file on every build without changing file content.

Describe alternatives you've considered

No response

[alan-agius4]

This should no longer be an issue when using the esbuild based builders. Please migrate to the esbuild based application builder and if the problem persists please open a new issue.

[angular-automatic-lock-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.}