Steps for setting up a project to compile for ES6 syntax:

Working on a project using Angular 2 + PrimeNG, I encountered an issue with TypeScript compilation while trying to use Git. The solution involved adjusting the package.json file.

"dependencies": {
 "@angular/common": "2.4.2",
 // List of dependencies goes here...
},
"devDependencies": {
// List of dev dependencies goes here...
}

After cloning the project repo, installing all npm packages, and attempting to build the project, I encountered a series of errors during compilation (here is a snippet of the error log).

ERROR in [at-loader] ./node_modules/@angular/router/src/utils/collection.d.ts:35:58
TS2304: Cannot find name 'Promise'.
// More error messages go here...

The issue stemmed from not recognizing es5 types. My tsconfig.json file looked like this:

{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
// Other options are defined here...
}
}

To address the problem, I switched the TS compiler to es6 mode by changing "target": "es6". However, this resulted in another set of errors:

ERROR in [at-loader] ./node_modules/@types/handlebars/index.d.ts:22:77
TS2314: Generic type 'HandlebarsTemplateDelegate<T, any>' requires 2 type argument(s).
// Additional error messages...

It seems that the project was not properly configured to handle es6 types. How can I correctly configure the project for es6 compilation?

Answer №1

In order to work with an angular project, it is currently necessary to use "es5" as the TypeScript compiler "target" since es6 is not widely supported.

However, certain features like "Promise" and "DOM.Iterable" are not compatible with ES5, requiring additional compilation options for these libraries to be loaded. To address this issue, you need to insert "lib": ["es2015", "dom"] in your "tsconfig.json":

{
"compilerOptions": {
"target": "es5",
"lib": ["es2015", "dom"],
"module": "commonjs",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"sourceMap": true,
"noEmitHelpers": true,
"noUnusedLocals": true,
"noUnusedParameters": true
},
"compileOnSave": false,
"buildOnSave": false,
"awesomeTypescriptLoaderOptions": {
  "forkChecker": true,
  "useWebpackText": true
 }
}

This fix is outlined in "Angular 2 guide - TypeScript Configuration"

If the target is es6, TypeScript includes extra ambient declarations such as Promise.

Given that QuickStart targets es5, you can modify the list of declaration files to be incorporated:

"lib": ["es2015", "dom"]

By doing this, all the es6 typings are available even when targeting es5.

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

A method to eliminate the mouse-over effect following the selection of an input box

Currently, I am utilizing Angular and encountering three specific requirements. Initially, there is an input box where I aim to display a placeholder upon pageload as 'TEXT1'. This placeholder should then toggle on mouse hover to display 'TE ...

Utilizing dotenv within npm scripts following a directory switch

I've been experimenting with dotenv and cross-var in npm scripts. The .env file contains the values for REPO_PULL_URL and REPO_PUSH_AUTHOR. { "scripts": { "testScript3": "shx rm -rf ./temp && dotenv cross-var git clo ...

Is there a way in TypeScript to prevent the modification of a class property and still trigger a runtime error if attempted?

I currently have the following code snippet: class Computed<Value> { _value: Value; get value(){ return this._value; } } When attempting to set the value property, TypeScript returns an error message: Cannot assign to value because it is ...

Encountered a problem while attempting to install Framework7 to Cordova using Npm

Currently, I am in the process of setting up framework7 on Ubuntu 18.04. Node version: v10.24.1 Npm version: 6.14.12 The error encountered is: npm ERR! Linux 4.15.0-154-generic npm ERR! argv "/usr/bin/node" "/usr/bin/npm" "i" "framework7-cli" "cordova" "- ...

What potential issues should I be aware of when I install new node packages?

I encountered an error message when trying to install a Node Package. Running npm install shows that everything is up to date. https://i.stack.imgur.com/d78hf.png ...

TypeScript in Angular causing lodash tree shaking failure

I am currently working on a large project that involves TypeScript. Various attempts have been made to optimize the use of lodash in my project. Before making any conclusions, I believe it is important to review the outcomes of my efforts. The command I ...

Changing {number, Observable<string>} to Observable<number, string> is a necessary transformation to be made

Is there a way to convert an array of objects with the following structure: { id: number, data: Observable<string> } into an array of objects with this structure: Observable<{id: number, data: string}> using only RxJS operators? ...

Encountering the error message 'Object is of type unknown' when implementing the createAsyncThunk function post utilization of Typescript and Redux Toolkit

Currently, I am utilizing Typescript in my React application where Redux Toolkit is being used for state management. The data is being fetched from an Express Api and everything operates smoothly if Redux is implemented without Typescript. However, when in ...

The validation using regex is unsuccessful when the 6th character is entered

My attempt at validating URLs is encountering a problem. It consistently fails after the input reaches the 6th letter. Even when I type in "www.google.com," which is listed as a valid URL, it still fails to pass the validation. For example: w ww www ww ...

Is it advisable to flag non-(null|undefined)able type arguments as a type error?

Can the function throwIfMissing be modified to only flag test1 as a compiler error? function throwIfMissing<T>(x: T): T { if (x === null || x === undefined) { throw new Error('Throwing because a variable was null or undefined') ...

The custom stylesheet added to index.html is not taking precedence over the Bootstrap 5 styles applied through NPM

In my Vue 2 project, I encountered an issue with Bootstrap 5.3 when installed via NPM. My custom CSS stylesheet in the index.html file was not able to override Bootstrap's CSS. Interestingly, I faced no problems when using Bootstrap from a CDN. Addit ...

There was a problem with the module '@angular/material' as it was unable to export a certain member

In creating a custom Angular Material module, I have created a material.module.ts file and imported various Angular Material UI components as shown below: import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/commo ...

The function Sync in the cp method of fs.default is not a valid function

When attempting to install TurboRepo, I encountered an issue after selecting npm. >>> TURBOREPO >>> Welcome to Turborepo! Let's get you set up with a new codebase. ? Where would you like to create your turborepo? ./my-turborepo ...

I am seeking to modify the CSS of the parent component upon the loading of the child component in Angular

In my Angular blog, I have a root component with a navigation bar containing router links to create a single-page application. My goal is to darken the background around the link when the child component loads. Currently, the link highlights only when pres ...

Lookup users either by their email or their unique primary key in the form of a UUID

Currently, I am utilizing typeorm along with typescript and the postgresql driver Within my controller, below is a snippet of code: const userRepository = getCustomRepository(UserRepositories); const query = { by_email: {where: {email: user_receiver} }, b ...

Starting PM2 with multiple instances can be achieved by following these steps

While running my nodejs code with PM2, I encountered a requirement for multiple instances of nodejs executing the same code. To address this need, I created a script named "myscript.sh": cd ~/myproject PM2_HOME='.pm2_1' /usr/local/bin/node /u ...

What is the best way to manage multiple tsconfig files for an Angular application?

Our customer has requested that we have two separate applications (with navigation from appA to appB) in one single package for easier deployment. However, we face a challenge as one section is coded in typescript with jQuery and the other is built in Ang ...

Encountered issues with NPM while resolving EACCESS errors during global installations

After consistently using sudo npm install -g ... for years, I've come to realize that it's considered bad practice. So, when starting a new project, I decided to address this issue and came across a helpful resource at https://docs.npmjs.com/reso ...

Encountering "Object is possibly undefined" during NextJS Typescript build process - troubleshooting nextjs build

I recently started working with TypeScript and encountered a problem during nextjs build. While the code runs smoothly in my browser, executing nextjs build results in the error shown below. I attempted various solutions found online but none have worked s ...

The returned type of intersected functions in Typescript does not match the inferred type

While attempting to extract the return type of an intersected request, I encountered a discrepancy between the return type and the inferred type. Check out the shortened URL for more details: https://tsplay.dev/mAxZZN export {} type Foo = (() => Promis ...