Mistakes in Compiling Typescript Code in Angular 2

Currently, I am utilizing Visual Studio 2017 for the development of an Angular 2 application with an Asp.Net Core WebApi backend. My guide through this process is the ASP.NET Core and Angular 2 Book authored by Valerio De Sanctis. Initially, everything was functioning smoothly until the inclusion of the @angular/forms package. Upon starting Task Runner, a series of errors emerged: 

[00:28:42] Starting 'app_clean'...
[00:28:42] Starting 'js'...
[00:28:42] Starting 'watch'...
[00:28:42] Finished 'watch' after 27 ms
[00:28:42] Finished 'app_clean' after 77 ms
[00:28:42] Starting 'app'...
C:/Users/Phoenix/Desktop/Angular 2 курс/CollectionsWorkAngular3/src/CollectionsWorkAngular/node_modules/@angular/core/src/facade/lang.d.ts(12,17): error TS2693: 'Map' only refers to a type, but is being used as a value here.
C:/Users/Phoenix/Desktop/Angular 2 курс/CollectionsWorkAngular3/src/CollectionsWorkAngular/node_modules/@angular/core/src/facade/lang.d.ts(13,17): error TS2693: 'Set' only refers to a type, but is being used as a value here.
C:/Users/Phoenix/Desktop/Angular 2 курс/CollectionsWorkAngular3/src/CollectionsWorkAngular/node_modules/rxjs/Observable.d.ts(69,60): error TS2693: 'Promise' only refers to a type, but is being used as a value here.
C:/Users/Phoenix/Desktop/Angular 2 курс/CollectionsWorkAngular3/src/CollectionsWorkAngular/typings/globals/core-js/index.d.ts(2083,41): error TS2339: Property 'unscopables' does not exist on type 'SymbolConstructor'.
[00:28:45] TypeScript: 80 semantic errors
[00:28:45] TypeScript: emit succeeded (with errors)
Numerous other errors like the one in the snippet above are present but have been omitted for brevity. To manage tasks, I am using Gulp as my Task Manager, the contents of my package.json file are as follows: 

{
  "version": "1.0.0",
  "name": "collectionswork",
  "private": true,
  "dependencies": {
    "@angular/common": "2.4.8",
    "@angular/compiler": "2.4.8",
    "@angular/core": "2.4.8",
    "@angular/http": "2.4.8",
    "@angular/platform-browser": "2.4.8",
    "@angular/platform-browser-dynamic": "2.4.8",
    "@angular/upgrade": "2.4.8",
    "@angular/forms": "2.4.8",
    "core-js": "^2.4.1",
    "reflect-metadata": "^0.1.3",
    "rxjs": "5.2.0",
    "systemjs": "^0.19.37",
    "typings": "^2.1.0",
    "zone.js": "^0.7.2"
  },
  "devDependencies": {
    "gulp": "^3.9.1",
    "gulp-clean": "^0.3.2",
    "gulp-concat": "^2.6.0",
    "gulp-sourcemaps": "^1.6.0",
    "gulp-typescript": "^3.1.5",
    "gulp-uglify": "^2.0.0",
    "typescript": "^2.0.0"
  },
  "scripts": {
    "postinstall": "typings install dt~core-js --global"
  }
}
`
The configuration settings in my tsconfig.json file are as below :`
{
  "compileOnSave": false,
  "compilerOptions": {
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "module": "system",
    "moduleResolution": "node",
    "noImplicitAny": false,
    "noEmitOnError": false,
    "removeComments": false,
    "target": "es5"
  },
  "exclude": [
    "node_modules",
    "wwwroot"
  ]
}
javascriptasp.nettypescript

Answer №1

If you have added core-js globally using the command "postinstall": "typings install dt~core-js --global --save",

Make sure to uninstall it first

> typings uninstall core-js --global

> npm cache clean

> npm i @types/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5b3834293e7631281b6b756275686d">[email protected]</a> --save-dev

Please refer to bramdebouvere's comment on https://github.com/DefinitelyTyped/DefinitelyTyped/issues/15140

Update your tsconfig.json file by adding typeRoots and types as shown below

{
  "compileOnSave": false,
  "compilerOptions": {
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "module": "system",
    "moduleResolution": "node",
    "noImplicitAny": false,
    "noEmitOnError": false,
    "removeComments": false,
    "target": "es5",
    "typeRoots": [
        "../node_modules/@types"
    ],
    "types": [
        "core-js"
    ]
  },
  "exclude": [
    "node_modules",
    "wwwroot"
  ]
}

This setup has been tested on the following versions successfully

> node -v

v7.7.3

> npm -v

4.1.2

Here is a snippet from the package.json file for reference:

  "dependencies": {
    "@angular/common": "^2.4.0",
    "@angular/compiler": "^2.4.0",
    "@angular/core": "^2.4.0",
    "@angular/forms": "^2.4.0",
    "@angular/http": "^2.4.0",
    "@angular/platform-browser": "^2.4.0",
    "@angular/platform-browser-dynamic": "^2.4.0",
    "@angular/router": "^3.4.0",
    "@angular/upgrade": "^2.4.9",
    "core-js": "^2.4.1",
    "reflect-metadata": "^0.1.10",
    "rxjs": "^5.1.0",
    "systemjs": "^0.20.9",
    "zone.js": "^0.7.6"
  },
  "devDependencies": {
    "@types/core-js": "^0.9.36",
    "@types/node": "^7.0.8",
    "gulp": "^3.9.1",
    "gulp-clean": "^0.3.2",
    "gulp-concat": "^2.6.1",
    "gulp-less": "^3.3.0",
    "gulp-sourcemaps": "^2.4.0",
    "gulp-typescript": "^3.1.5",
    "gulp-uglify": "^2.0.0",
    "typescript": "^2.2.1",
    "typings": "2.1.0"
  }

Answer №2

An update in the DefinitelyTyped's @types/core-js code has caused an issue, as discussed in this GitHub thread.

The book's GitHub repository now includes a workaround that is compatible with both VS2015 and VS2017. You can either access the updated code from there or apply the necessary changes manually to your local files.

If you prefer to make the modification yourself, open your package.json file and replace the following:

"scripts": {
    "postinstall": "typings install dt~core-js --global"
}

With this:

"scripts": {
    "postinstall": "typings install <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d7b3a3a9b4b8a5b2fabda497e7f9eef9e0">[email protected]</a>+20161130133742 --global"
}

This adjustment will prompt Visual Studio to fetch a specific (and functional) version+build for the core-js typings rather than opting for the newest one available. There is no need for uninstalling/reinstalling anything, as Visual Studio should handle updating the /typings/ files automatically.

For users of Visual Studio 2017, it is important to mention that the GitHub repository offers a dedicated branch for VS2017 which includes updates for the .sln and .csproj files. While removing typings due to Typescript 2 being integrated in VS2017 is an option, it may require additional code alterations and third-party component updates. The provided workaround remains the most convenient solution while preserving the original code from the book.

This issue is also discussed in a post on my blog here, serving as an example of challenges when using external libraries.

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

Utilizing Generic Types in React TypeScript Functional Components

I'm currently developing a TypeScript React component that includes generic type props, so I define the React component as: export interface MyCompProps<T> { items: T[]; labelFunction: (T) => string; iconFunction: (T) => JSX.Element; ...

reactjstypescriptgenericsreact-typescript

Creating a JSON array in JavaScript for future reference

I am interested in creating a JSON array where I can define the fields and add data to it later in my code. However, I am unsure about the correct syntax to achieve this. So far, my attempts have resulted in some parse errors; <script> var myJSONAr ...

javascriptjson

Tips for adding up data tables in CodeIgniter

The output is displaying as $NaN ( $NaN total) I followed the code example from datatables and made modifications to the column for SUM function. Here is my code snippet: <script> $(document).ready(function() { $('#tableoperasional').Data ...

javascriptjquerycodeigniterdatatables

Problem with onblur and onchange events not being triggered in input tag

After encountering this issue, I came to the realization that the events onblur and onchange function properly. However, I noticed that if your page contains only ONE <input type="text" onblur="loadXMLDoc()"> Change Content</input> The behav ...

javascriptajaxhtml

Issue: Incompatibility between React and TypeScript leading to an error message - "No

When I try to map through an array in my code, I encounter a significant error as shown below: // Home.tsx render() { const { inputs, outputs, expectedOutputs } = this.state; return ( <ContentContainer> {inputs.map((inpu ...

reactjstypescript

Integrating redux-form with the react-widgets DateTimePicker component

I am currently working on a project using ReactJS with Redux and I am trying to incorporate a form similar to the one shown in this example: Most of the components are working well, but I am encountering an issue with the DateTimePicker due to the momentL ...

javascriptreactjsreduxredux-formreact-widgets

Transforming date and timezone offset into an isoDate format using moment.js

When retrieving data from the API, I encounter Date, Time, and Offset values in separate columns. My goal is to obtain an ISO date while maintaining the original date and time values. const date = "2019-04-15" const time = "13:45" const ...

javascripttypescriptmomentjs

What is the best way to determine the variable height of a div in Angular 7?

I'm currently trying to use console.log in order to determine the height of a div based on the size of a table inside it. This information is crucial for me to be able to ascertain whether or not a scrollbar will be present, especially within a dialog ...

javascripthtmlangularviewchild

What steps can I take to prevent encountering a Typescript Error (TS2345) within the StatePropertyAccessor of the Microsoft Bot Framework while setting a property?

During the process of constructing a bot in Typescript, I encountered TS2345 error with Typescript version 3.7.2. This error is causing issues when attempting to create properties dynamically, even if they are undefined, or referencing them in the statePro ...

javascripttypescriptbotframeworkstate

In search of a practical and functional demonstration showcasing Electron v8 combined with TypeScript

Excuse the straightforwardness of my inquiry, as I am reaching the limits of my patience. I am in search of a practical example demonstrating the use of Electron v8 and TypeScript. The example should be simple and functional, without the need for WebPack, ...

typescriptelectron

Navigating the implementation of undefined returned data in useQuery hook within Apollo and ReactJS

I am facing an issue with my code where the cookieData is rendered as undefined on the initial render and query, causing the query to fail authentication. Is there a way to ensure that the query waits for the response from the cookie API before running? co ...

javascriptreactjsgraphqlnext.jsapollo

Show a loading icon as the synchronous Ajax request is being sent

Seeking a way to show a spinner while making a synchronous Ajax request to fetch data from the server. Acknowledging that asynchronous mode is preferred, but not permitted in this case. Aware that a sync ajax request can cause browser blocking. An attemp ...

javascriptjqueryajaxspinnersynchronous

Using Vaadin: update Label text with TextField input after Button is clicked

I'm working on a simple Vaadin form where I want the text entered in a TextField to appear in a Label after the user clicks on a Button. Here's the code snippet: package com.example; import javax.servlet.annotation.WebServlet; import com.vaad ...

javajavascriptvaadinonclicklistener

It looks like everything is running smoothly, but it seems like the ReactDOM.render() method is missing in action

I'm currently diving into the world of React.js and eager to build my knowledge from the basics upwards. While delving into the documentation, I stumbled upon the utilization of ReactDOM.render(element, Document.getElementById("root")), whi ...

javascriptreactjsnext.js

In order to develop a JS class in React JS, I must import Scripts

I have a collection of SDK scripts that need to be included in the following manner: <script src="../libs/async.min.js"></script> <script src="../libs/es6-shim.js"></script> <script src="../libs/websdk.client.bundle.min.js ...

javascriptreactjsfingerprint

Loading tab content on click using jQuery

These tabs have a chrome-like appearance. When the first tab (Facebook) is clicked, it shows Facebook content. Clicking on the second tab (Twitter) displays the content of the first tab. Tabs three, four, and five show their respective contents without any ...

javascriptjqueryhtmlruby-on-railstabs

Oops! A JSON parsing error occurred due to the presence of an unexpected token '}'

I encountered an issue while trying to develop a registration route using passportjs. When sending a request via Postman, I received the following error message: SyntaxError: Unexpected token } in JSON at position 119    at JS ...

javascriptnode.jsexpressjwtpassport.js

Ways to resolve axios promise

My current task involves working on a GET request from an API. Upon receiving the response shown in the image, I noticed that the data presented in the promise is accurate. My goal is to display the letters and their corresponding promise data within the H ...

javascriptnode.jsreactjs

Challenges encountered while implementing generic types in TypeScript and React (including context provider, union types, and intersection

I have a fully functional example available at this link: The code is working properly, but TypeScript is showing some errors. Unfortunately, I've run out of ideas on how to make the code type safe. I've searched extensively for examples that ma ...

reactjstypescript

The use of Buffer() is no longer recommended due to concerns regarding both security vulnerabilities and

I'm encountering an issue while trying to run a Discord bot. The code I'm using involves Buffer and it keeps generating errors specifically with this code snippet: const app = express(); app.get("/", (req,res) => { if((new Buffer(req.quer ...

javascriptnode.jsexpressbuffer