Why does Angular build create files with 'es5' and 'es2015' but not 'es6' (or no suffix at all)?

Question

I recently downloaded the Angular CLI (@angular/cli 9.0.1). I then proceeded to create a new application so that I could create a new Angular Element, package it up, and use it in another application.

After following a few blogs, the final step of every blog I came across all talk about creating a single JS file from the generated files dropped under the dist/ folder. For example: https://blog.bitsrc.io/using-angular-elements-why-and-how-part-1-35f7fd4f0457

Then using the cat command, we are concatenating the runtime.js, polyfills.js, scripts.js, and main.js files from the dist/angular-app folder into a angularapp.js file inside the preview folder.

Running ng build angular-app --prod --output-hashing=none instead seems to produce files named:

• main-es5.js
• main-es2015.js
• polyfills-es5.js
• polyfills-es2015.js
• runtime-es5.js
• runtime-es2015.js

I scoured every single file that had the terms es5 and es2015 and changed it to es6, but it still produced the same es5 and es2015 file names. What am I doing wrong here?

Cathee

Answer 1

Angular doesn't bundle the JavaScript files into a single file.

You can add a build step to concat the files together.

concat-build.js:

var concat = require('concat');
const es5 = ['./dist/app/runtime-es5.js','./dist/app/polyfills-es5.js','./dist/app/main-es5.js'];
const es2015= ['./dist/app/runtime-es2015.js','./dist/app/polyfills-es2015.js','./dist/app/main-es2015.js'];
concat(es5, './dist/app/elements-es5.js');
concat(es2015, './dist/app/elements-es2015.js');

package.json:

"scripts": {
   "concat": "node ./concat-builds.js",
   "build": "ng build --prod --output-hashing=none && npm run concat"
}

Don't get confused by the ES5 and ES2015 builds, because the Angular team split the bundles depending upon how modules are loaded (not specifically on the JavaScript version).

Web browsers that support modules will load the ES2015 versions instead of the ES5 versions, but both are recommended to be in the Html.

If you want only a single file to use, then you're forced to use the older ES5 version, and should provide it as follows:

<script src="elements-es5.js">

It is recommended to provide both files as follows and the browser will load the appropriate version:

<script src="elements-es5.js" nomodule defer>
<script src="elements-es2015.js" type="module">

Please note:

Older browsers will ignore the type="module" version, and newer browsers will skip the nomodule version.

Philanthropic

So the blogs I came across were just old (or wrong) and it's actually correct that Angular generates the file names with the suffixes? – Cathee

@Cathee yes, the blogs are out of date. This change was made to Angular awhile back. – Philanthropic

I am still confused as es5 is not es2015. It appears that as of 2015 ES began appending the year as part of its edition syntax. es5 is the 5th Edition; es6 / es2015 is the 6th Edition of ECMAScript; es7 / es2016 is the 7th Edition of ECMAScript; So I am confused as to why I see es5 and es2015 as part of the bundles. – Joletta

Interesting in the part "older browsers" assuming I have a spec that asks for chromium only clients, is there a way to disable the build to create this unnecessary (in my case) files? – Revoice

Answer 2

ES2015 is the same as ES6. ECMAScript 6 was released in 2015.

Some history:

https://codeburst.io/javascript-wtf-is-es6-es8-es-2017-ecmascript-dca859e4821c

Sergei

Answer 3

They are the same thing.

6th Edition - ECMAScript 2015

• 6th Edition ECMAScript -> ES6
• ECMAScript 2015 -> ES2015

Different names for the same thing. Angular has simply chosen to call it es2015.

Cherisecherish