Replace chunk name with module name in angular 4 lazy loading

Question

I'm using angular-cli-1.6.3 for bundling my project. I try to rename lazy loaded chunk name into valid module name. But it is not working. Code snippet given below,

{
  path: 'lazy',
  loadChildren: './lazy/module#LazyModule?chunkName=LazyModule'
}

Effusion

why are you using ?chunkName=LazyModule? where did you got that from? – Landgravine

I saw some sample. But now i removed that. – Effusion

Answer 1

you should be using -nc flag

ng build --aot -nc

or

ng build --aot --named-chunks

Update 1 : Based on Comment

to remove the hash numbers set the --output-hashing to false as below

ng build --aot --nc --output-hashing=false

Documentation Link

Anhwei

Throwing error like: ERROR in Error: LazyModule?chunkName=LazyModule is not an NgModule – Effusion

it simply created a file like "module.ebc4664b446ca766a851.chunk.js". But i want module name as file name or custom name. Do needful – Effusion

whats is the name of the module ? – Anhwei

Module name: "LazyModule" – Effusion

lazy.module.chunk.js will be the file name created – Anhwei

no it created like this only "module.ebc4664b446ca766a851.chunk.js". What to do? Im using angular-cli-1.6.3 – Effusion

what is the name of the file you have? it will be based on that! – Anhwei

File name: module.ts – Effusion

Rename that too lazy.module.ts – Anhwei

Yeah Its worked.. "lazy.module.e7e62921c478fc93d386.chunk.js". But is there any way to remove that hash code in the file name? Reason is, in future if i changed anything in that particular module, ill compile and replace the particular file alone. – Effusion

Thanks a lot you saved my time. – Effusion

But i didnt find any documentation like, that file name is related to chunk name. If you have any link please updated that in your Answer. – Effusion

Hey everyone! The chunks have hashes for a reason. What if you update your app and people still have it open? They'll get the OLD compatible hashed file instead of loading a new file with the same name that may not be compatible. If you have files on a CDN they may get cached too - so having unique filenames per version is much safer. – Katydid

Answer 2

 ng build --namedChunks=true --outputHashing=none --vendorChunk=true

• namedChunks Use file name for lazy loaded chunks
• output-hashing Define the output filename cache-busting hashing mode.
• vendorChunk Use a separate bundle containing only vendor libraries.

Clearance