Angular-cli: Choose ES target level

[pauldraper]

It appears that Angular CLI outputs only in ES5.

I would like to be able to choose the ES target, e.g. ES2015.

This can produce smaller, faster, and more readable code.
(And yes, sources maps can account for the readability part, but they have their own sets of disadvantages, including terrible performance for the CLI.)

Compare

class A { example() { return 5 } }

and

A = function() {}; A.prototype.example = function() { return 5 }

[clydin]

The desired output target can be configured via the application's tsconfig.json. All new projects created via 8.0+ default to using ES2015 with differential loading enabled to also generate ES5 bundles for older browsers.

[williangd]

@clydin Is it possible to build only for ES2015?

[elvisbegovic]

@williangd yes it is, to know if cli should build es5, itsimply check this page : https://caniuse.com/#feat=es6-module

Inside tsconfig.ts you can already target es2015 BUT depending on the content you have inside your browserslist file, it will also make another build for es5 too !

There are two possiblities to build es2015 only:

1. set tsconfig.ts target to es2015 and remove whole content inside your browserslist file (not recommended, bad idea)

1. set tsconfig.ts target to es2015 and put inside your browserslist all browsers supporting es2015 you want, actually it's something like :

Chrome >= 61
Firefox >= 60
Safari >= 11
Opera >= 48
Samsung >= 8
Android >= 67
ChromeAndroid >= 74
FirefoxAndroid >= 66

or less specific

last 2 Chrome versions
last 2 ChromeAndroid versions

last 2 Safari versions
last 2 iOS versions

last 2 Firefox versions
last 2 FirefoxAndroid versions

last 2 Edge versions

If you visit my caniuse es6-module support link you will see all these versions are green.

Edge is green but not es2015 ready because has little note (6) at the corner top-left :

N.B. Remove browserslist will not works as empty content !

[pauldraper]

Through trial and error, it seems the browserslist file should be in the project root.

Can't find any documentation on this file. :/

[clydin]

You can find details regarding the file including query options, file resolution, and alternative configuration locations here: https://github.com/browserslist/browserslist/blob/master/README.md

[pauldraper]

Thanks @clydin .

In defense of my ignorance, something Angular-specific is relevant, because the version 8 upgrade schematic includes moving src/browserlist to browserlist. (That schematic code is how I figured out where I should add the file.)

[LizaVoskanyan]

@pauldraper thanks a lot. you saved my day. :) But it's crazy that the browserlist file is in the src/browserlist when it should be in the root... maybe the angular team needs to fix this.

[JohnnyDevNull]

@pauldraper it depends more on the angular.json "root" path of the project.

For example if you have a mono style workspace where your projects are under projects/my-angular-client then this is your browserlist file directory.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}