Custom generated filename with Angular Cli

Question

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.

Answer 1

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.

Answer 2

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.

Answer 3

try using:

ng build --prod --output-hashing none

Answer 4

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.

Answer 5

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'

Answer 6

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.