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

Related searches

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?

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": "./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.

ng build, The command can be used to build a project of type "application" or "library". is created by default when you use the CLI to create the project, and you can use Some additional options can only be set through the configuration file, either by� If you create an application using Angular's strict mode, you will also have an additional package.json file in the src/app directory. For more information, see Strict mode . Inside the src/ folder, the app/ folder contains your project's logic and data.

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

Deployment, When you are ready to deploy, however, you must use the ng build command to build the Ruby: create a Ruby server using (sinatra) with a basic Ruby file that � The application builder uses the webpack build tool, with default configuration options specified in the workspace configuration file (angular.json) or with a named alternative configuration. A "production" configuration is created by default when you use the CLI to create the project, and you can use that configuration by specifying the

Workspace and project file structure, When the workspace file structure is in place, you can use the ng generate Contains image and other asset files to be copied as-is when you build your� The main CLI configuration file, angular.json, contains a fileReplacements section in the configuration for each build target, which allows you to replace any file with a target-specific version of that file. This is useful for including target-specific code or variables in a build that targets a specific environment, such as production or staging.

Angular CLI: Serving and Building for Production ― Scotch.io, Notice the file size differences! The dist folder. The build command also creates a new folder called dist for distribution. These are the files we can host� When working with Angular and Angular CLI, you end up quickly with a lot of folders & files as the application grows. The default behaviour of CLI generates a folder with at least the class, CSS, html and test component file. If you don’t have the habit to work with this amount of files, this can make the maintainability difficult.

How to bundle an Angular app for production?, The command does not generate an output folder. The ng build command generates output files just once and doesn't serve them. Why Angular? You might even ask yourself, why not do everything in a previously existing technology, like jQuery for example? There are many use cases that are still today well solved by that approach, but that lead us to the question: In which way does Angular improve upon previously existing technologies?

Angular (since version 2.0) uses npm modules and dependencies for development. That's the sole reason you are seeing such a huge number of files. A basic setup of Angular contains transpiler, typings dependencies which are essential for development purposes only. Once you are done with development, all you will need to do is to bundle this application.

Comments
  • 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?
  • @michael yes, the blogs are out of date. This change was made to Angular awhile back.