How Angular packages are build

Question

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

main.js
polyfill.js
runtime.js
scripts.js
vendor.js
styles.js

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).

Which version of angular? angular cli? – Dan Oswalt Feb 11 '20 at 21:48 — Dan Oswalt, Feb 11 '20 at 21:48

joka00 · Accepted Answer · 2023-06-21T07:12:59.133

11

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.

edited Jun 21 '23 at 07:12

answered Feb 11 '20 at 21:38

joka00

2,357
1
10
27

Thanks. Interesting, I don't have `1.js` generated. Also, what is the difference/use of `scripts.js`. Isn't it duplicate of `vendor.js`? – Manu Chadha Feb 12 '20 at 06:27
Specifically, I am trying to resolve this issue which I suppose is linked to incorrect use/call of scripts. Would you be able to look at this - https://stackoverflow.com/questions/60177855/theme-and-mode-path-infer-issue-with-ace-js-and-angular – Manu Chadha Feb 12 '20 at 06:29
You don't have to have `1.js` It's generated only when you have some module lazy loaded. – joka00 Feb 12 '20 at 07:08
got it. If you get a chance, please look at the other problem as well I am facing – Manu Chadha Feb 12 '20 at 08:19
got it. If you get a chance, please look at the other problem as well I am facing – Manu Chadha Feb 12 '20 at 08:19
what about styles.js ? – Shivam Tiwari Feb 10 '22 at 05:47
The first link is gambling spam. – Alex Jun 21 '23 at 02:39
1

@Alex Oh thanks for notice, it's removed now. – joka00 Jun 21 '23 at 07:14

How Angular packages are build

1 Answers1

Linked