Why Chunk files are generated ,when the "ng build --prod" command is isssued in angular 2 and above versions

Question

Currently am implementing my User interface code using the advanced ui framework like an angular of version 2 and 4.

When ever i want to deploy the code to the server i need to build the project by issuing the following command "ng build --prod" so many chunk files are being generated.

I would like to know why those chunk files are generated.

Answer 1

Because Angular is a single page application.

Those chunks are also generated when you serve your application. Here is the result of my ng serve command (no flags, just serving) :

** NG Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ ** 
Date: 2018-04-10T12:09:49.010Z                                                                               
Hash: 7e4a7d27b89ee3d81e37                                                                                   
Time: 15613ms                                                                                                
chunk {administration.module} administration.module.chunk.js () 9.22 kB  [rendered]                          
chunk {exploitation.module} exploitation.module.chunk.js () 1.26 MB  [rendered]                              
chunk {inline} inline.bundle.js (inline) 5.79 kB [entry] [rendered]                                          
chunk {main} main.bundle.js (main) 625 kB [initial] [rendered]                                               
chunk {polyfills} polyfills.bundle.js (polyfills) 623 kB [initial] [rendered]                                
chunk {scripts} scripts.bundle.js (scripts) 562 kB [initial] [rendered]                                      
chunk {source-post.module} source-post.module.chunk.js () 1.42 MB  [rendered]                                
chunk {styles} styles.bundle.js (styles) 653 kB [initial] [rendered]                                         
chunk {vendor} vendor.bundle.js (vendor) 18.9 MB [initial] [rendered]                                        

webpack: Compiled successfully.   

As you can see, chunks are generated there too.

The chunks represent pure Javascript code. In this code, you will find your styles, your templates, and all of your Angular features (components, services ...).

Angular use those chunks to render a dynamic page. Under the hood, when you navigate on an SPA, you actually never leave the index.html page. The content of this file is beign replaced by your chunks.