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'
}

why are you using ?chunkName=LazyModule? where did you got that from? — Jota.Toledo
– Jota.Toledo, Commented Jan 29, 2018 at 7:58

Aravind · Accepted Answer · 2018-01-29 09:11:24Z

25

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

edited Jan 29, 2018 at 9:11

answered Jan 29, 2018 at 7:19

Aravind

41.7k16 gold badges97 silver badges111 bronze badges

Sign up to request clarification or add additional context in comments.

13 Comments

Srigar Over a year ago

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

Srigar Over a year ago

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

Srigar Over a year ago

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

Aravind Over a year ago

Rename that too lazy.module.ts

Simon_Weaver Over a year ago

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.

|

double-beep · Accepted Answer · 2019-05-22 11:21:23Z

5

 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.

edited May 22, 2019 at 11:21

double-beep

5,67019 gold badges43 silver badges50 bronze badges

answered May 22, 2019 at 11:19

ElasticCode

7,9252 gold badges38 silver badges49 bronze badges

Collectives™ on Stack Overflow

Replace chunk name with module name in angular 4 lazy loading

2 Answers 2

13 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

13 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related