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'.

Lemuel

Did my answer fix your problem? – Merari

Yes. Thanks for your help – Lemuel

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. – Woodford

Answer 1

es2020 support was introduced in TypeScript 3.8.

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

Merari

Answer 2

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.

Edythedythe

Answer 3

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.

Nap