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

angulartypescriptecmascript-nextecmascript-2020

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

Unable to get md-virtual-repeat to work within md-select?

Attempting to use md-select to showcase a large amount of data is causing the browser to freeze upon opening. To address this, I tried implementing md-virtual repeat within md-select for improved performance. However, the code doesn't seem to be funct ...

javascripttypescriptmaterial-designangular-material

Is there a way to ensure that only individual objects are selected in FabricJS on the Canvas, rather than a group of objects?

One issue I am facing is with my method for selecting objects on the canvas by clicking a button. How do I ensure that it skips selecting groups and only selects individual objects? Generating a group of shapes here: const group = new fabric.Group([ ...

angulartypescripthtml5-canvasfabricjs

Get the most recent two files from a set

I am currently facing a challenge in retrieving the first 2 documents from a collection in google cloud firestore. My current approach involves using the timestamp of the latest document and then calculating the time range to fetch the desired documents. l ...

typescriptfirebasegoogle-cloud-platformgoogle-cloud-firestoregoogle-cloud-functions

Access the global window variable from index.html within a Vue component

In my Vue project, I am incorporating an Stencil.js component in the following manner: index.html: <script type="module" src="https://xxxxxx.s3-eu-west-1.amazonaws.com/topbar.esm.js"> </script> <script> window.addEventLis ...

typescriptvue.jsstenciljs

Using prevState in setState is not allowed by TypeScript

Currently, I am tackling the complexities of learning TypeScipt and have hit a roadblock where TS is preventing me from progressing further. To give some context, I have defined my interfaces as follows: export interface Test { id: number; date: Date; ...

javascriptreactjstypescript

Ways to turn off specific ngtsc warnings

Ever since updating my Angular app to version 15, I've been noticing some warnings popping up in both the terminal and Chrome DevTools. Is there a way to turn off or disable these warnings? I keep seeing this warning message about the optional chain o ...

angulartypescripttsconfigtsconfig.json

Facing issues with integrating Mixpanel with NestJS as the tracking function cannot be located

While utilizing mixpanel node (yarn add mixpanel) in conjunction with NestJS, I have encountered an issue where only the init function is recognized. Despite calling this function, I am unable to invoke the track function and receive the error message: Ty ...

javascriptnode.jstypescriptnestjsmixpanel

I'm having trouble grasping the issue: TypeError: Unable to access the 'subscribe' property of an undefined object

I've been working on a feature that involves fetching data from API calls. However, during testing, I encountered some errors even before setting up any actual test cases: TypeError: Cannot read property 'subscribe' of undefined at DataC ...

javascriptangulartypescriptrxjsintegration-testing

"Utilize TypeScript to create a function that can handle either a single value or

I am attempting to develop a double function with the following structure: type MaybeArray<T> = T | T[]; function double<T extends MaybeArray<number>>(data: T): T extends number[] ? number[] : number { if (Array.isArray(data)) { / ...

typescript

Navigating with Angular: The URL for the home page should be set as http://localhost:4200/

I recently implemented URL routing in my project, but I have encountered an issue. Upon redirecting to the home page, the URL changes to http://localhost:4200/home. However, I would like the URL for the home page to simply be http://localhost:4200/ instea ...

angularangular-routing

Giving the function parameter dynamic type depending on the first parameter

Currently, I have a basic function that my client uses to communicate with my server. In order to maintain flexibility, I have implemented the following: public call(method: string, ...parameters: any[]) {} On the server side, I organize all methods toge ...

functiontypescriptvisual-studio-code

Creating a loading screen in Angular2: Step-by-step guide

How can you best integrate a preloader in Angular 2? ...

javascripthtmlangular

Efficiently organizing items within a list on Ionic

Currently, I have an ion-list structured as follows: <ion-list *ngFor = "let chat of Chats"> <ion-item (click) = "openChat(chat.id)"> <ion-label> <h2> {{chat.username}} </h2> ...

javascripthtmlangulartypescriptionic-framework

Using Angular 4 to monitor changes in two-way binding properties

Recently, I developed a unique toggle-sorting component that examines if the current sorting parameters align with its sorting slug and manages clicks to reflect any changes. // toggle-sorting.component.ts @Input() sortingSlug: string; @Input() currSorti ...

angulartypescript

The error "ReferenceError: window is not defined" occurs when calling client.join() due to

I am looking to create a video call application using React and Next.js with the AgoraRTC SDK. After successfully running AgoraRTC.createClient(), AgoraRTC.createStream(), and client.init(), I encountered an error when trying to execute client.join(). The ...

reactjstypescriptnext.jsagora.io

Guide to creating JSDoc for a TouchEvent handler

Looking to improve my shorter-js codebase with JSDoc for TypeScript definitions, but hitting a roadblock. I've implemented the on() function using Element.addEventListener, working well so far. However, when passing a TouchEvent as a parameter for an ...

javascripttypescriptaddeventlistenertouch-eventjsdoc

Replace pipeline function during component testing

During my unit testing of a component that utilizes a custom pipe, I encountered the need to provide a fake implementation for the transform method in my test. While exploring options, I discovered that it's feasible to override components, modules, ...

javascriptangularunit-testing

Can a React.tsx project be developed as a standalone application?

As a student, I have a question to ask. My school project involves creating a program that performs specific tasks related to boats. We are all most comfortable with React.tsx as the programming language, but we are unsure if it is possible to create a st ...

reactjstypescript

Enhance TypeScript class declarations with additional properties

Our company has developed its own test framework for our software because we found it difficult to use an open-source framework within the context of our specific development needs. Recently, I took on the task of creating Typescript Definition Files to e ...

typescriptclassinner-classesextendoverwrite

Attempting to create a sorting functionality using Vue and Typescript

I am trying to implement a feature where clicking on the TableHead should toggle between sorting by most stock on top and least stock on top. Currently, I have two buttons for this functionality, but it's not very user-friendly. My approach involves ...

typescriptvue.js