Angular - Prod Build not generating unique hashes
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",
]
Related videos on Youtube
![Sameer](https://i.stack.imgur.com/bDnoL.jpg?s=256&g=1)
Comments
-
Sameer about 2 years
Angular production build is not generating unique hashes in my project.
Below are the build logs screenshot
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.
-
Sameer over 4 yearsMy 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
-
Athanasios Kataras over 4 yearsYou ARE changing the content right? If the code remains the same, then no new hashes are generated (by design).
-
Sameer over 4 yearsYa! I am aware of "hashes are changed per bundled content, not per build", I changed lot of code/content still same output/hashes
-
Athanasios Kataras over 4 yearsThen I'd just go with updating my cli, as this looks like a recurring problem in some versions.
-
Athanasios Kataras over 4 yearsBy 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.
-
Sameer over 4 yearsWhat about script.js
-
Sameer over 4 yearsThank you for your quick reply, So this seems to be another cache issue not related to angular build hashing
-
Sameer over 4 yearsLet us continue this discussion in chat.