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.
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.
Those chunks are made by webpack and they are used to load your code from the server to your browser.
You can read more about the integration with Angular in the official Angular docs on Webpack.
