27

With Angular-cli the builded filename is main.[hash].bundle.js when use ng build -prod Is it possible to remove the hash form this filename. So just main.bundle.js?

onetwo12
  • 2,359
  • 5
  • 23
  • 34
sneeky
  • 1,458
  • 2
  • 13
  • 19

6 Answers6

52

It's now supported via a command option as of beta.25.

This allows the output filename hashes to be configured during a build via a new build command option --output-hashing. There are four possible values:

none: no hashing performed

media: only add hashes to files processed via [url|file]-loaders

bundles: only add hashes to the output bundles

all: add hashes to both media and bundles

none is the default for the development target. all is the default for the production target.

More details here.

Community
  • 1
  • 1
Recep
  • 18,991
  • 2
  • 28
  • 21
12

I added the following script element for production build in the package.json file.

"scripts": {
    "prod" : "ng build --prod --output-hashing=none --base-href=./"
}

then running

npm run prod

would build the dist folder without hash and also includes the ./ as base-href so that files are loaded relative to current directory.

Krishna Vedula
  • 1,643
  • 1
  • 27
  • 31
8

As per my understanding the hash is used for production build so that one wont run into browser cache issues, and the users wont have to clear cache before using the new deployment.

I doubt that angular-cli team would give us an option to configure that, we have to wait to check that.

Meanwhile if you want to customize your build process you may build the webpack config yourself.

Also, the CLI team has indicated that there will be a few webpack plugins which will help in creating own webpack configuration. Checkout here.

More details here, WEBPACK: AN INTRODUCTION.

Madhu Ranjan
  • 17,334
  • 7
  • 60
  • 69
  • Thanks for this answer, as I was actually wondering what the reason behind the hashing is. – Alexandra Jan 23 '18 at 15:41
  • Regarding production - it's definitely for caching but don't forget to consider the case where someone **already** has your old site open and you deploy a new version of all the files. If you delete the old files from the webserver then the new person will get 404 errors if they try to lazy load something (a lazy module) that isn't there anymore. So if the new deployment is 'reasonably compatible' with the old one (server API / image filenames etc.) then consider leaving the old files for a period of time so new users don't get 404s. – Simon_Weaver May 15 '19 at 00:05
  • This will of course depend on what your software is - and a 404 can be a good thing if you want people kicked off - but then you ideally should handle that. – Simon_Weaver May 15 '19 at 00:05
  • Thanks. If the filenames have random strings in it then what is the way to include them in html files via script tag? Can you please look at https://stackoverflow.com/questions/62269386/problems-in-moving-from-development-mode-to-production-mode – Manu Chadha Jun 09 '20 at 06:08
3

try using:

ng build --prod --output-hashing none
Adriano
  • 3,788
  • 5
  • 32
  • 53
arvindsc
  • 147
  • 5
0

Currently you can't do this with the cli, but you can come out of it and use standard Webpack.

Run ng eject in your project and it will build up a proper Webpack configuration and scripts.

You can read up on it in the Wiki on GitHub.

https://github.com/angular/angular-cli/wiki/eject

Once you've got the config you can do what @tallaxes suggested.

SpaceBeers
  • 13,617
  • 6
  • 47
  • 61
-3

Remove [chunkhash] from the following lines in angular-cli/models/webpack-build-production.js (under node_modules if patching, under packages if forking):

filename: '[name].[chunkhash].bundle.js',
sourceMapFilename: '[name].[chunkhash].bundle.map',
chunkFilename: '[id].[chunkhash].chunk.js'
tallaxes
  • 141
  • 3