Angular 2 is struggling to locate the file with the name 'Set'

Currently, I am in the process of upgrading my project from angular2 beta15 to rc4. However, when I try to compile, I encounter the following error:

path/node_modules/@angular/common/src/directives/ng_class.d.ts(81,35): error TS2304: Cannot find name 'Set'.

This is how my tsconfig.json file looks:

{
  "compilerOptions": {
    "target": "ES5",
    "module": "commonjs",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "moduleResolution": "node",
    "removeComments": false,
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors": false,
    "declaration": true,
    "outDir": "tmp/app"
  },
  "exclude": [
    "node_modules",
    "dist",
    "tmp"
  ]
}

I have also added this to my main.ts file:

/// <reference path="../typings/index.d.ts" />
/// <reference path="../typings/tsd.d.ts"/>

and my typings.json file includes:

{
  "name": "my-project",
  "dependencies": {},
  "globalDependencies": {
    "core-js": "registry:dt/core-js#0.0.0+20160602141332",
    "jasmine": "registry:dt/jasmine#2.2.0+20160621224255",
    "node": "registry:dt/node#6.0.0+20160621231320",
    "moment": "registry:dt/moment#2.8.0+20160316155526",
    "moment-node": "registry:dt/moment-node#2.11.1+20160329220348",
    "es6-shim": "registry:dt/es6-shim#0.31.2+20160317120654"
  }
}

Switching "target": "ES5" to "ES6" in tsconfig.json resolves the error, but I must stick with ES5. It seems that including

///<reference path="../../node_modules/angular2/typings/browser.d.ts"/>
might be the missing piece here. Alternatively, as mentioned in https://github.com/typings/typings/issues/151, using typings/index.d.ts should work as well.

I would greatly appreciate your insights on how to address this issue. Thank you in advance.

Answer №1

It seems that the Set functionality is included in the polyfill for ES6. Angular2 suggests utilizing core-js to access this (refer to https://angular.io/guide/quickstart):

The process begins with the ES2015/ES6 shim from core-js, which patches the global context (window) with key features of ES2015 (ES6)

You can specify it within your typings.json file and install typings by running the command typings install.

Answer №2

While experimenting with a demo application, I ran into an error similar to yours. Switching the target to "es6" in my tsconfig.json resolved the issue for me. After successfully running the Angular 2 Quick Start application and comparing it to my setup, I discovered a missing line in my tsconfig.json file:

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

Adding this single line to my configuration file fixed the errors. Here's what I learned from the Angular Typescript Configuration documentation regarding that specific line:

lib.d.ts

The lib.d.ts file contains ambient declarations for common JavaScript constructs found in JavaScript runtimes and the DOM.

Depending on the --target setting, TypeScript includes additional ambient declarations like Promise when targeting es6.

Since the QuickStart project targets es5, we can customize the list of declaration files included:

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

This allows us to have access to all es6 typings even while targeting es5.

https://angular.io/docs/ts/latest/guide/typescript-configuration.html

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

The Battle of Extends and Intersection in Typescript

Typescript's concept of extension is akin to C++'s inheritance. Intersection in Typescript involves creating a new object with all the properties from the intersected classes. Why utilize intersection when extends keyword can already merge ...

Webpack is having trouble compiling TypeScript 3.7 due to the inclusion of features such as Optional Chaining and Nullish Coales

Trying to utilize the latest features of TypeScript 3.7 such as Optional Chaining and Nullish Coalescing is causing an error in webpack during transpilation. app: Module parse failed: Unexpected token (50:40) app: File was processed with these loaders: ...

Navigating the inner component of an ng-template in Angular

Imagine a scenario where we have a component named TopComponent with a template structured as follows: <ng-template #top> <inner-selector #inner></inner-selector> </ng-template> The code for this component is quite straightforw ...

Creating an array in TypeScript that supports multiple possible types, recursively, and enforces that all elements must be of the same type

I've been having difficulty creating a type that fits this specific data model: Each node can be: - native type - string, number, boolean, null, undefined - a list containing all the *same type* of nodes - a dictionary of any type of nodes ...

When attempting to access the id-data, an error is thrown indicating that the property 'username' of null cannot be read

Is there a way to transfer a user's data to their profile? I have successfully retrieved the complete user information from the API and displayed it on the user's page. However, I encounter an error when attempting to display the same data on the ...

Navigating away from an Ionic 2 app running in the browser and then returning: tips and tricks

Currently, I am setting up my oauth2 authentication in Ionic2. Through my research, I have discovered that the Cordova InAppBrowser plugin can be utilized to handle the process of navigating to the website and granting access to the App. However, I am st ...

What are the best methods for visually designing a database using Entity Framework Core?

I find myself contemplating the best approach to designing my database scheme for optimal efficiency and visual appeal. Currently, I am working on an ASP.NET Core application with Angular 2, utilizing Entity Framework Core ("Microsoft.EntityFrameworkCore" ...

Unable to detect keyup.enter event on iOS keyboard

After developing my app in the Ionic framework + Angular, I encountered an issue with binding the (keyup.enter) event to input functionality. It seems to be working flawlessly on older versions of iOS devices like (OS 12.5.4), but not on the latest version ...

Issue with typing in subscription encountered in Typescript RXjs version 6.6.0

Have you attempted using the code snippet below? const data = new Data() data.subscribe({ next: (value) => {}, error: (value) => {}, complete: (value) => {}, }); Encountering this error: Compilation failed. sr ...

Error message: The object is not visible due to the removal of .shading in THREE.MeshPhongMaterial by three-mtl-loader

Yesterday I posted a question on StackOverflow about an issue with my code (Uncaught TypeError: THREE.MTLLoader is not a constructor 2.0). Initially, I thought I had solved the problem but now new questions have surfaced: Even though I have installed &apo ...

I encountered an error while trying to globally install @ionic/cli using the npm command. The error message displayed was

I am currently trying to set up Ionic 6 on my system. So far, I have installed various versions of npm using nvm. nvm ls D:\<user_name>\Projects\Ionic-6>nvm ls * 16.14.2 (Currently using 64-bit executable) 16.14.0 16.13. ...

Error: Unhandled promise rejection - component.canDeactivate is undefined

I encountered an error while setting up my CanDeactivateGuard. Uncaught (in promise): TypeError: component.canDeactivate is not a function To ensure reusability, I decided to create a generic version of the CanDeactivateGuard. For this purpose, I craf ...

Transforming an Image URL into base64 format using Angular

I'm currently facing difficulty when attempting to convert a specified image URL into base64. In my scenario, I have a string that represents the image's path. var imgUrl = `./assets/logoEmpresas/${empresa.logoUrl}` Is there a way to directly co ...

Using Angular2, the autofill data on IOS browsers in Chrome is found to be invalid

I am currently using template driven forms in angular2. The form I have developed is working perfectly on desktop and Android devices, however, I am encountering an issue when autofilling the form on Chrome for iPhone - the form becomes invalid. I also hav ...

Is there a way to define a return type conditionally depending on an input parameter in typing?

I need help ensuring that a function in TypeScript returns a specific type based on a parameter. How can I make TypeScript understand my intention in this scenario? type X = 'x' type Y = 'y' const customFunc = <Type extends X | Y> ...

Leveraging ES Module packages in Azure TypeScript Function Development

I'm encountering an issue while trying to utilize the p-map package in my Azure Function. The error message that I'm getting is as follows: A Worker failed to load function: 'serverless' with function id: '<id>'. Result: ...

What is the process for including a selected-by option in a VIS network graph?

I'm trying to outline the neighboring nodes of the node that has been selected (highlightNearest). https://i.sstatic.net/lynhu.png Unfortunately, I haven't had success achieving this using JavaScript. Link to StackBlitz ...

Fetching DataItem from a Kendo Grid using a custom button in an Angular application

I have been working on transferring the dataItem from a Kendo grid to an Angular 6 component. Here is my setup: <kendo-grid [data]="view | async" [height]="533" (dataStateChange)="onStateChange($event)" (edit)="editHandler($even ...

Using CreateMany within a Prisma Create query

Hello, I have been working on implementing a create statement that accepts an array of another model. Below are my schemas: model House { id String @id createdAt DateTime @default(now()) updatedAt DateTime @updatedAt property_name String ...

One typical approach in React/JavaScript for monitoring the runtime of every function within a program

Experimenting with different techniques such as performance.now() or new Date().getTime() has been done in order to monitor the processing time of every function/method. However, specifying these methods within each function for time calculation purposes h ...