What are some best practices for integrating ES2020 into an Angular project?

Below is the content of 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"
        ]
      }
    }

After updating the lib and target version from es2018 to es2020, an error occurred as shown below:

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

Answer №1

ES2020 features were officially incorporated into TypeScript with the release of version 3.8, as detailed in the TypeScript 3.8 release notes.

To take advantage of these new capabilities, users are required to upgrade to Angular version 9.1 or higher, which includes support for TypeScript 3.8.

Answer №2

Despite using Angular version 11.2.14, I encountered issues trying to set

"target": "ES2020"
in my tsconfig.json.

My build process failed with the following error:

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

The issue may require an additional loader to handle the output of these current loaders. ...

As per this GitHub thread, the problem seems to be related to WebPack (version 4.44.2). It appears that support for ES2020 will be available with WebPack 5.

Answer №3

It seems that the es2020 target may have only been introduced in Angular 9, so if you're using a version before that, it might explain why it's not working for you.

On the other hand, the esnext target is designed to support the latest features, so you should find similar functionality with that option instead.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Guide on displaying tooltip messages for a custom directive in Visual Studio Code

I have developed a custom directive called app-subscriber. When I hover the mouse over it, I want to display a tooltip message saying "This is for subscribers and requires an email address". Is this achievable? Do I need to create a new VS Code extension f ...

The Angular project was functioning properly when tested locally, but encountered an error in the Quill Editor during the building process

I have encountered an issue when deploying my Angular 8 + Quill project. Everything works fine locally with 'ng serve', but upon deployment, I am facing the following error. Despite trying various solutions like updating Angular or deleting &apos ...

Checking for Webpack has begun in a separate process - not found

After working on my Angular2 + Typescript project with Webpack, I noticed a change in the bundling process. Previously, the console output would display three specific comments at the end: webpack: bundle is now VALID [default] Checking started in sepear ...

Filter multiple columns in an Angular custom table with a unique filterPredicate

Looking to develop a versatile table that accepts tableColumns and dataSource as @Input(). I want the ability to add custom filtering for each table column. Currently, I've set up the initialization of the table FormGroup and retrieving its value for ...

What is the most effective way to retrieve data from a URL and process it using reactjs?

Looking to consume JSON data from a URL, here is an example of the JSON structure: { "results": [ ... ], "info": { ... } } I aim to display the fetched data as a component property. What is the most efficient way to achie ...

The type '{} is not compatible with the type 'IProps'

In my current project, I am utilizing React alongside Formik and TypeScript. The code snippet below demonstrates my usage of the withFormik Higher Order Component (HOC) in my forms: import React from 'react'; // Libraries import........ import { ...

Steps for setting up an Azure Pipeline for a NativeScript Angular application

I'm working on a project with NativeScript Angular, and I am looking for a way to streamline the build process for iOS and Android devices whenever changes are made to the main branch through commits or merges. Ideally, I would like to utilize Azure P ...

The PWA software encountered an issue where the checkForUpdate function never resolved

Despite my efforts, I have encountered an issue while working with the PWA for our application. The checkForUpdate and versionUpdates methods do not seem to resolve to any values. constructor( appRef: ApplicationRef, updates: SwUpdate, ) { ...

Launching a Node.js command-line interface to NPM, developed using TypeScript

I'm struggling with deploying my Node CLI tool to NPM. During development and testing, everything works fine. I can even use `npm link` on the repo without any issues. After successfully publishing and downloading the package, the application crashes ...

Collaborative React front end elements are now housed in their own TypeScript project within Visual Studio 2017

In Visual Studio, our project structure includes the following: PublicClient, Admin, and SharedComponents. The SharedComponents project is essential because many components are shared between our client and admin interface. This structure is based on the f ...

Guide to combining an Angular 2 (angular-cli) application with Sails.js

I am looking to integrate the app created using angular-cli with Sails.js. My background is in PHP, so I am new to both of these frameworks. What are the steps involved in setting them up together? How can I execute commands like ng serve and/or sails li ...

Encountered a Solana Error while handling Instruction 2: custom program error with code 0x1000078

While attempting to create an AMM Pool using the 'ammCreatePool.ts' script from the raydium-sdk repository, I encountered the following error message. I executed the script directly with ts-node src/ammCreatePool.ts and made modifications so that ...

What sets [NgClass] apart from [class] in Angular JS2?

Consider a view element with the following three attributes: class="red" [class]="isGreen ? green : cyan" [ngClass]="'blue'" Does Angular merge the output of these attributes or does one override the others? If we have: [class]="getElementCla ...

Utilizing Ace with a personalized theme in Angular 2 application while straying away from the default theme directory

I am currently facing an issue with integrating an Ace editor into my Angular 2 application, which is built using angular-cli. I want to link the Ace editor to a custom theme stored in the app's assets folder src/app/assets instead of within node_modu ...

Best practice for encapsulating property expressions in Angular templates

Repeating expression In my Angular 6 component template, I have the a && (b || c) expression repeated 3 times. I am looking for a way to abstract it instead of duplicating the code. parent.component.html <component [prop1]="1" [prop2]="a ...

The error encountered is: "Unable to modify the 'x' property as it is readonly for the '[object Array]' object."

I've attempted various methods to modify this problem, regardless of how it's explained on different Stack Overflow threads. I am faced with an obstacle where I have an array composed of objects, and my goal is to iterate through the array and mo ...

The Clarity Design side menu becomes unscrollable when the content is too long for the view

Currently, I am facing an issue with the sidenav where the navigation links go beyond the view and I am unable to scroll to see the "hidden" links unless I zoom out. My frontend framework is Angular 5 and this is how I organized the components: <nav c ...

Can TypeScript be used to dynamically render elements with props?

After extensive research on SO and the wider web, I'm struggling to find a solution. I have devised two components, Link and Button. In short, these act as wrappers for <a> and <button> elements with additional features like chevrons on t ...

Angular14 offers a unique highcharts speedometer with multiple dials in the gauge chart for a visually stunning

Looking to create a unique speedometer design with an inner dial and an additional triangular indicator using Highcharts gauge within the Angular14 framework. Is it possible to include an extra indicator with Highcharts gauge in Angular14? Click on the l ...

Using Fixed Patterns and Combining Types in an Interface

Presently, I am working with this interface: export interface User{ name: string birthday: number | Timestamp ... } When strictTemplates:false is enabled, I have no issue using this interface for server data retrieval with the birthday parameter in ...