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?

Answer 1

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.