How should I use ES2020 in Angular?

Question

Here is my tsconfig.json file:

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

When I changed lib and target version from es2018 to es2020 it gives me below error:

tsconfig.json(13,15): error TS6046: Argument for '--target' option must be: 'es3', 'es5', 'es6', 'es2015', 'es2016', 'es2017', 'es2018', 'esnext'.

REMINDER: Safari on iOS devices is tied to the OS version. So anyone who hasn’t updated to iOS 13.4 or later will not be able to use ES2020 features. This is less than 1% of my users but unfortunately isn’t zero. — Simon_Weaver, Jun 08 '22 at 22:46

JSON Derulo · Accepted Answer · 2020-12-14T11:22:49.633

14

es2020 support was introduced in TypeScript 3.8.

You must upgrade to Angular 9.1 (or later) to use TypeScript 3.8.

edited Dec 14 '20 at 11:22

answered May 04 '20 at 13:17

JSON Derulo

9,780
7
39
56

score 4 · Answer 2 · answered Aug 03 '21 at 19:24

I was using 11.2.14 version of Angular, but still wasn't able to have "target": "ES2020" in tsconfig.json.

My build was failing on:

Error: ./src/app/shared/validators/form.validators.ts 10:21 Module parse failed: Unexpected token (10:21) File was processed with these loaders:

./node_modules/@angular-devkit/build-optimizer/src/build-optimizer/webpack-loader.js

./node_modules/@ngtools/webpack/src/index.js

You may need an additional loader to handle the result of these loaders. ...

According to this GitHub issue, the error is related to WebPack (my version 4.44.2). And support for ES2020 will come with WebPack 5.

score 1 · Answer 3 · answered May 04 '20 at 13:16

1

I don't think es2020 was added as a target until Angular 9. So if you're on a version lower than that, I could see it not working.

esnext targets the latest supported features, so that should work very similarly.

answered May 04 '20 at 13:16

Jesse

2,391
14
15

How should I use ES2020 in Angular?

3 Answers3