Using ES6 in Angular CLI project

Question

I want to use ES6 code (such as collections) in an Angular 4+ project built with angular-cli. Here is the tslint.json I'm using:

{
  "compilerOptions": {
    "baseUrl": "",
    "declaration": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": ["dom","es2017"],
    "mapRoot": "./",
    "module": "es6",
    "moduleResolution": "node",
    "outDir": "../dist/out-tsc",
    "sourceMap": true,
    "target": "es6",
    "typeRoots": [
      "../node_modules/@types"
    ]
  }
}

Note that target has to be es6, since Typescript can't transpile ES6 code to ES5.

Unfortunately, angular-cli uses webpack2 which seems to have a hardwired dependency on UglifyJS which is incompatible with ES6 and it is unlikely this will be fixed anytime soon. I could choose not to use ES6 code or angular-cli, but before I give up on either, I'm wondering if there's a reasonable workaround for this issue?

Angular CLI uses TypeScript, though? That's pretty much a direct superset of ES6. Uglifying works fine out of the box last time I tried, since the TypeScript gets compiled away before it reaches that point. — Joe Clay
– Joe Clay, Commented May 11, 2017 at 15:35
@Julia Even with a production build? Do you have target set to es6? — Rob
– Rob, Commented May 11, 2017 at 16:19
yes it prod. target is es5. Angular itself use a lot of Map. — Julia Passynkova
– Julia Passynkova, Commented May 11, 2017 at 16:27

chrispy · Accepted Answer · 2017-05-11 18:50:47Z

2

Typescript can't transpile ES6 code to ES5

This isn't the case. (And that doesn't really make sense, as Typescript is just the language and the transcompilation is separate).

Set the build target to ES5. If you're writing in Typescript, then you have access to those ES6 features, as Typescript is a superset of the latest version of ECMAScript (theoretically).

If you're getting issues, it may have to do with your module. Try commonjs or similar to get access to a module that can transpile to ES5.

answered May 11, 2017 at 18:50

chrispy

3,6321 gold badge14 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Rob Over a year ago

Setting target to es5 (and leaving modules as es6) worked -- after I removed certain es6-specific code such as use of the spread operator, Array.includes, etc. This is the probably the best I can do without adding Babel into the mix.

chrispy Over a year ago

For more information, it looks like they decided to allow that combination sometime last year, putting the onus on the developer to take care of any incompatibilities. github.com/Microsoft/TypeScript/issues/6319

P. Moloney Over a year ago

With Typescript, and module: "es2015", I have had no issues in using ES6-specific code in my angular-cli project. except the things that don't comply with Angular's AOT Compiler

Collectives™ on Stack Overflow

Using ES6 in Angular CLI project

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related