What is the reason behind Angular generating files with 'es5' and 'es2015' extensions instead of 'es6' (or no extension)?

Recently, I installed the Angular CLI (@angular/cli 9.0.1). My goal was to create a new Angular Element, package it, and then integrate it into another application.

Following several blog tutorials, I found that they all mentioned the final step of creating a single JS file from the generated files in the dist/ folder. One example is:

The process involved using the cat command to concatenate the runtime.js, polyfills.js, scripts.js, and main.js files from the dist/angular-app directory into an angularapp.js file within the preview folder.

When I ran 

ng build angular-app --prod --output-hashing=none
, I noticed that it generated files with names such as:

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

I tried modifying every instance of es5 and es2015 to es6 in the files, but it still resulted in the same es5 and es2015 file names. What could I be missing or doing incorrectly here?

javascriptangulartypescriptangular-elements

Answer №1

If you're using Angular, the JavaScript files are not bundled into a single file automatically.

You can include a build step to concatenate 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 be confused about the ES5 and ES2015 builds, as the Angular team divides the bundles based on how modules are loaded (not just on the JavaScript version).

If your web browser supports modules, it will load the ES2015 versions instead of the ES5 versions, but it's recommended to include both in the HTML.

If you prefer to use only one file, then you should opt for the older ES5 version and include it like this:

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

It's advisable to provide both files so that the browser can choose the appropriate version to load:

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

Keep in mind:

Older browsers will disregard the type="module" version, while newer browsers will ignore the nomodule version.

Answer №3

They both refer to the identical concept.

6th Edition - ECMAScript 2015

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

Two different labels for the same idea. Angular has opted to use es2015 as its designation.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

When attempting to access the Object data, it is returning as undefined, yet the keys are being

I have an Object with values in the following format: [ { NameSpace: 'furuuqu', LocalName: 'uuurur', ExtensionValues: 0, FreeText: 'OEN', '$$hashKey': 'object:291' }, { Nam ...

javascriptjsonobjectstringifyjsonparser

What is the process for declaring an exported type variable in React?

I have created a unique configuration in a different file: //config.js export const config = [ { id:0, name:"Config 1", }, { id:1, name:"Config 2", }, { id:2, name ...

javascriptreactjs

Having trouble locating the namespace for angular in typescript version 1.5

I am using Angular 1.5 with TypeScript and have all the necessary configurations in my tsconfig.json file. However, when I run tslint, I encounter numerous errors in the project, one of which is: Cannot find namespace angular My tsconfig.json file looks ...

angularjstypescripttslint

Loading event in HTML5 video element is in progress

I'm interested in creating a loading animation for an html5 video, similar to the display on Youtube videos (reference: https://www.youtube.com/watch?v=5vcCBHVyG50) I attempted using the canplay event but I believe I may have misunderstood its true p ...

javascriptjqueryhtmleventsvideo

Tips on Resolving TypeError: Unable to Access Undefined PropertyAre you encountering a

I'm currently facing an issue while writing unit test cases using Jest in my Angular project. Whenever I attempt to run my test file, the following errors occur: TypeError: Cannot read property 'features' of undefined TypeError: Cannot read ...

angulartypescriptunit-testingtestingjestjs

Guide on integrating a personalized theme into your Ionic 5 app

I'm looking to customize the theme of my Ionic 5 app by adding a red-theme to variables.scss @media (prefers-color-scheme: red) { :root { --ion-color-primary: red; Afterwards, I attempted to initialize it in index.html <meta name=" ...

angularionic-frameworkionic5

Difficulty maintaining list formatting in AngularJS and Bootstrap due to ng-repeat functionality

I'm currently working on a project where I need to display content from an array using ng-repeat in Angular. The content is originally in JSON format, but it has been stringified before being added to the array. The problem I am facing is that this c ...

javascripthtmljsonangularjstwitter-bootstrap

The synergy of Redux with scheduled tasks

In order to demonstrate the scenario, I have implemented a use-case using a </video> tag that triggers an action every ~250ms as the playhead moves. Despite not being well-versed in Flux/Redux, I am encountering some challenges: Is this method cons ...

javascriptfluxreduxperiodicity

Unraveling the onsubmit FormObject in an HTML form within the Google Sheets Sidebar: Tips and tricks

In the sidebar, I am setting up a form with 27 inputs to create new sheets based on various criteria. The form includes a text entry field and multiple groups of radio buttons and checkboxes. However, I am currently facing an issue when trying to create a ...

javascripthtmlformsgoogle-apps-scriptgoogle-sheets

Is there a way to retrieve the value of a dropped file in a file input using jQuery?

Can the data from a dropped file be set in a file upload input field? Or does a dropped file need to be instantly uploaded to the server? Here is an example code snippet: <input type="file" id="drop-box" /> $("#drop-box").on('drop', fun ...

javascriptjqueryhtmlfileinput

Encountering a NodeJS crash when executing MySQL queries

Exploring NodeJS for the first time and experimenting with MySQL. Successfully retrieving content from the database to display on my page (/test01). Encountering a crash when attempting to fetch values from the database in order to store them in a cookie ...

javascriptmysqlnode.js

The union type consisting of String, Boolean, and Number in type-graphql has encountered an error

I attempted to create a union type in type-graphql that represents the String, Number, and Boolean classes, but unfortunately, it was not successful. Does anyone have any suggestions on how to achieve this? export const NonObjectType = createUnionType({ ...

typescripttypesuniontypegraphql

Track the number of views each month using PHP and MySQL to generate dynamic jQuery charts

I am currently utilizing jQuery with chart.js to display the view counter based on month using PHP and MySql. Each page view is inserted into MySql in the following format : | id | ip | page | date(timestamp) | | 1 | 138.86.20.20 | test.p ...

javascriptphpjquerymysqlchart.js

Getting into nested information in a JSON string using TypeScript

I need help accessing the data values (data1, data2, and date) from this JSON structure. I would like to store these values in an array that can be sorted by date: { "07" : { "07" : { "data1" : "-1", "data2" : "test", "date" : "1995-07-07" ...

jsontypescript

Having trouble getting jQuery .append() to behave the way you want?

I have created a code snippet to display a table like this: $("#results").append("<table><tr><th>Name</th><th>Phone Number</th></tr>"); $("#results").append("<tr><td>John</td><td>123123123 ...

javascriptjquerycss

I am looking to implement an animation that automatically scrolls to the bottom of a scrollable DIV when the page is loaded

My DIV is configured with overflow-y set to scroll. .scrolling-div { width: 85%; height: 200px; overflow-y: scroll; } If I have an abundance of content within this div, my goal is for it to automatically scroll to the bottom upon loading the page. I am ...

javascriptjquerycss

Securing string parameters in Django templates for JavaScript function usage

Can anyone help me with a JavaScript function that is returning a set of objects? return Func("{{id}}", "{{name}}") I'm encountering an issue when passing strings that contain quotes, such as "Dr.Seuss' "ABC""BOOk"", which leads to invalid synt ...

javascriptpythondjango

Obtain the result of the Mongoose find operation

Greetings, I am facing a challenge with accessing elements returned from a find operation in Mongoose due to the asynchronous nature and callback functions. Below is the code for reference: function retrieveBudgets(email, callback) { models.User.f ...

javascriptnode.jsmongodbexpressmongoose

File index with Node.js server for handling files

I currently have a code snippet for setting up a file server that serves files from a static folder named "public1". However, I am facing difficulties in making an HTML page display by default when a user navigates to the IP address in a browser. Although ...

javascripthtmlnode.jsexpress

Typescript allows you to apply a filter to an array

Query: Is there a way to display a pre-selected item from my dropdown using its unique ID? Issue/Explanation: The dropdown options in my web service are dynamically fetched based on a user's ZipCode. For example, a Provider is displayed as {Pho ...

javascriptangulartypescript