Angular-cli: How to Name Chunks?

[Narasimha969]

How to name chunks created by angular/cli in webpack

[figuerres]

@Narasimha969 : why ? what is the problem ?
the files with the 0,1,2,3,4 names are generatd by the compiler as it finds what code needs to be in a chunk, the need for a given chunk may not be the same for each compile if you add code to the app or change the code ....

[Narasimha969]

@figuerres I want to set my own defined names for those 0,1,2,3, 4 etc ..

[RicardoVaranda]

DUP of https://github.com/angular/angular-cli/issues/5171

[rudzikdawid]

webpack 2.4.0 has nice Features

import() now allows to configure a chunk name

import(/* webpackChunkName: "my-chunk-name" */ "module")

https://github.com/webpack/webpack/releases/tag/v2.4.0

[KhizerRehan]

Here you go!
Prod Build
ng build --prod -nc true

[meyer20]

When i run with dev mode, all the chunks are generated with your names, in prod mode, the chunks are generated with sequential numbers. In my case, i need the sequential number in both modes.

Dev mode:
https://imgur.com/a/JGRQEuF

Prod mode:
https://imgur.com/a/Z7tZPsb

Someone knows why this happen?

[Narasimha969]

@meyer20 In angular.json file, check for configurations

"dev": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.dev.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": true,
"aot": false,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true
},

change namedChunks to false

[meyer20]

Hi @Narasimha969, sorry for reply you too late.

I tried your suggestion today, but i don't had success :/

My configuration:
"configurations": {
"production": {
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
]
},
"dev": {
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": false,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
]
}
}

Scripts:
"build-prod": "./node_modules/.bin/ng build --prod --aot=false --build-optimizer=false --output-hashing none",
"build-dev": "./node_modules/.bin/ng build --watch --extractCss --no-aot --output-hashing none",

Any suggestion?
Thank you for your attention :)

[simeyla]

Would really love to be able to name chunks with the datestamp. Then when I see them in error logs I can see if someone is getting an old chunk somehow.

 main.883c6d4bef6e254fc614.js   =>   main.20190903115501XXXXXXXX.js

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