CODEWITHSUNDEEP
angularwebpack
Manu Chadha
Manu Chadha

Reputation: 16723

How Angular packages are build

What are the different files generated by the Angular build? I notice there are 6 of them:

I suppose Angular uses webpack to make builds. But I am not able to find any resource which could explain what these files contain. For eg. does main.js contain my application code? If I am using 3rd party npm packages, do they go in scripts.js or vendor.js? Why there is a .js file for styles? (I thought styles were a .css thing).

Upvotes: 10

Views: 5634

Answers (1)

joka00
joka00

Reputation: 2537

In the last versions there is a differential loading implemented so it genererates two of each of this files one in ES5 and second in ES2015

Between the filename and the extension there is also a hash. In case of differential loading there is also a js version behind the file separated with - so file name looks like this name-jsversion.hash.js

runtime.js - in the link it's called inline it was renamed in Angular 6.0 to runtime

This is a webpack loader. A tiny file with Webpack utilities that are needed to load the other files.

vendor.js

This file contains any libraries imported into your app (app.module), including the Angular libraries. Third party libraries imported into your app also get compiled into this file (e.g. lodash, moment etc).

Warning this file is HUGE after a dev compile (ng build) because it contains everything required to compile Angular in the browser. Always run a prod build (ng build –prod) before releasing your app to production. A prod build runs the Ahead of Time (AoT) compilation and performs tree-shaking.

main.js

This is where the action happens. This file contains all your code.

polyfills.js

This one should be self explanatory. It contains all the polyfills you declare in your polyfills.ts file.

scripts.js

This one should also be self explanatory. It contains the scripts you declare in the scripts section of your angular.json file.

1.js or 2.js or ... - the number is incrementing. If there are no lazy loaded modules this file isn't generated.

This is a file that contains a lazy loaded module, as many lazy loaded modules you have that many files will generate.

Upvotes: 13

Related Questions