`The term 'promise' is typically used to describe a type, yet in this context, it is being utilized as a value.`

I attempted to employ a promise for an Async call in my custom form validator, so I created a separate TypeScript file called usernameValidators.ts.

import { Control } from 'angular2/common';

export class UsernameValidators {

    static shouldBeUnique(control: Control){
        return new Promise((resolve, reject) => {
            setTimeout(function(){
                if(control.value == "mosh")
                    resolve({ shouldBeUnique: true });
                else
                    resolve(null);

            }, 1000);
        });
    }
}

While working on this in VS Code, I noticed that there is a red squiggly line under Promise, and upon checking the PROBLEMS tab, I found the following error message:

https://i.sstatic.net/5bMTp.png

Can anyone provide guidance on how to resolve this issue?

Answer №1

The issue you're facing is that you have set the target as es5, which does not natively support Promise. Therefore, you will need to include a shim that provides the implementation for Promise.

An easy solution would be to add the "es2015.Promise" library in your tsconfig.json:

{
  "compilerOptions": {
    "target": "es5",
    "module": "system",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false,
    "lib": ["es2015.promise", "dom"]
  },
  "exclude": [
    "node_modules",
    "typings/main",
    "typings/main.d.ts"
  ]
}

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

Whoops! Looks like there was a hiccup with the Vercel Deployment Edge Function, causing an

Every time I attempt to send a POST request to my Edge Function on Vercel Deployment, I encounter the following error message: [POST] /api/openai reason=EDGE_FUNCTION_INVOCATION_FAILED, status=500, user_error=true TypeError: Illegal invocation at app/api/ ...

In Angular 4, I encountered an issue where adjusting the height of the navigation bar caused the toggle button to no longer expand the menu in Bootstrap

In the process of developing an angular application, I encountered a situation where I needed to adjust the height of the nav bar using style properties. After making the necessary changes, everything was working fine. However, a problem arose when I mini ...

Guide on How to Embed an Angular Module in a Next.js (React App)

I'm currently in the process of integrating Micro Front End. As part of this integration, we need to include an Angular app in Next.js. To do so, we have injected the angular remoteEntry.js as shown below: injectScript({ global: 'app', ...

Special characters in JSON files may cause loading issues in Nativescript Angular

Can someone help me with an issue I'm having while trying to retrieve a JSON file from the server using a GET method? { "myKey": [{ "code" : "RMB", "symbol" : "¥", }] } When making the Nativescript GET request, ev ...

The dynamic duo of Typescript and Express creates an unbreakable bond within a configuration

Trying to incorporate ES6 modules into my app has been a bit frustrating. Initially, I attempted setting "module": "es2020" or "module": "esnext", only to encounter an error instructing me to specify "type": "module" in the package.json file or use the .m ...

Creating React Components with TypeScript: Ensuring Typechecking in Class and Function Components

Want to ensure typechecking works when defining React Class/Function components in TypeScript? Struggling to find a comprehensive guide on how to do it correctly. I've managed to define the Props and State interfaces, but I'm unsure about how to ...

Module '@tanstack/react-table' cannot be located even though it has been successfully installed

Currently, I am tackling a TypeScript React project and encountering an issue while attempting to import ColumnDef from @tanstack/react-table in my columns.tsx file. import { ColumnDef } from "@tanstack/react-table"; export type Payment = { id ...

Encountered an issue while using OpenAPI 3.1 with openapi-generator-cli typescript-fetch. Error: JsonParseException - The token 'openapi' was not recognized, expected JSON String

I am interested in creating a TypeScript-fetch client using openapi-generator-cli. The specifications were produced by Stoplight following the OpenAPI 3.1 format. However, when I execute the command openapi-generator-cli generate -i resources/openapi/Attri ...

Issue with HTTP interceptor failing to activate

I'm having trouble with my interceptor not triggering. Despite trying multiple solutions, I can't seem to get it working. The interceptor is failing to intercept http requests, resulting in the 'Authorization' header not being added. ...

Angular 8: ngx-socket-io changes the connection URL while in production mode

One issue arises when running the application in production mode. In development mode, the socket client successfully connects to http://localhost:3002/socket.io/?EIO=3&transport=polling&t=N4--_Ms. However, in production mode, the URL changes to ht ...

Can a constant be utilized as the property name within routerLink when specifying queryParams?

I am currently trying to update the current page by modifying or adding the query parameter "categoryId". When I attempt: <a [routerLink]="" [queryParams]="{ categoryId: category!.id }" queryParamsHandling="mer ...

Navigating back to a specific segment of a dataset while using virtual scrolling

Virtual scrolling is a fantastic way to optimize rendering for large data sets. For this particular scenario, I am making use of the Angular Material CDK APIs to implement this feature. However, a specific requirement needs to be addressed - when a user ...

What is the method in AngularJS2 for using TypeScript to inject dependencies into components?

I have been encountering different methods of injecting dependencies into my component and not all of them seem to be working for me. I am curious about the advantages and disadvantages, what the recommended best practices are, and why some methods are not ...

The error message "Property 'location' is not found on type 'Readonly<{}> - React Router and Typescript" indicates that the 'location' property is not available on

I am currently working on setting up a secure route for authentication. I have implemented a ProtectedRoute component based on the documentation, which is structured like this: interface ProtectedRouteProps { auth: AuthState; } const ProtectedRoute = ( ...

The Clerk middleware is causing delays in loading, leading to a 504 Error on NextJS / Vercel with the message 'FUNCTION_INVOCATION_TIMEOUT'

I'm currently working on a web page where I need to utilize Clerk for authentication and login. However, I've encountered an issue with the middleware taking too long to load, causing deployment problems for the app. Here is the code from middle ...

Exploring the capabilities of the Next.js router and the useRouter

import { routeHandler } from "next/client"; import { useRouteNavigator } from "next/router"; const CustomComponent = () => { const routerFromHook = useRouteNavigator(); } export default CustomComponent; Can you explain the disti ...

What is the best way to utilize RxJs for streaming HostListener events?

Although I've found plenty of resources on binding Angular HostListeners, I'm curious about using RxJs to stream it instead: @HostListener('document:click', ['$event']) handleClick(event: Event) { // etc } I want to cre ...

Firebase data causing issues with ion-gesture recognition?

Hey there! I'm currently facing an issue with my ionic app. I added the ion-gesture to my project, but due to the ngFor loop pulling data from Firebase, the cards are unable to move. Here's a snippet of my code: <ion-card *ngFor="let po ...

I'm looking to learn how to implement the delete method in an API using TypeScript. Can anyone help me out

I am seeking guidance on utilizing 'axios' within 'nuxt.js'. I have experimented with sample data, and I am particularly interested in learning how to utilize the 'axios' method within 'nuxt.js' using TypeScript. T ...

Typescript having issues compiling to commonjs/es2015 accurately

I currently have Node v14.5.0 installed and I'm using ts-node-dev in my development environment However, I am encountering an error every time I try to compile to JS. Initially, I attempted with the following tsconfig: "target": "es5& ...