2

I am using Visual Studio 2017 to develop Angular 2 App with Asp.Net Core WebApi backend. I am following the ASP.NET Core and Angular 2 Book, the author is Valerio De Sanctis. Everything was working ok until I added @angular/forms package. When I start Task Runner there are a couple of errors: 

[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)
There are much more errors like in snippet I just removed to be shortly. I am using Gulp as Task Manager, here is my package.json: 
{
  "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"
  }
}
`
here is my tsconfig.json :`
{
  "compileOnSave": false,
  "compilerOptions": {
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "module": "system",
    "moduleResolution": "node",
    "noImplicitAny": false,
    "noEmitOnError": false,
    "removeComments": false,
    "target": "es5"
  },
  "exclude": [
    "node_modules",
    "wwwroot"
  ]
}
Wang Liang
  • 4,244
  • 6
  • 22
  • 45
Bek Masharipov
  • 79
  • 1
  • 11

2 Answers2

2

if you installed core-js as global "postinstall": "typings install dt~core-js --global --save",

uninstall it first

> typings uninstall core-js --global

> npm cache clean

> npm i @types/core-js@0.9.36 --save-dev

please check bramdebouvere comment from https://github.com/DefinitelyTyped/DefinitelyTyped/issues/15140

Modify the tsconfig.json (add typeRoots and types)

{
  "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"
  ]
}

It's working on the below versions

> node -v

v7.7.3

> npm -v

4.1.2

package.json

  "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"
  }
neojustice
  • 36
  • 4
  • When I changed `"scripts": { "postinstall": "typings install core-js --global"}` and clicked on save, I got errors in npm output : – Bek Masharipov Mar 16 '17 at 09:32
  • The following change is working for me. From `"scripts": { "postinstall": "typings install dt~core-js --global" }` to `"scripts": { }` Do you forget to remove the comma(**,**) in front of **scripts** tag. – neojustice Mar 16 '17 at 09:41
  • Ok! I will try. In the beginning of your answer you noted this line `> typings install core-js --global`, can you please explain what I should to do with it? I am sorry for such questions. – Bek Masharipov Mar 16 '17 at 09:44
  • Sorry for my first typo, it should be `typings uninstall core-js --global`. That command will uninstall the **core-js** under **typings\globals** folder. – neojustice Mar 16 '17 at 09:48
  • Ok, removing typings fixed issue, now I can build my project with Vs2017 without errors. But Gulp is still showing errors – Bek Masharipov Mar 16 '17 at 10:39
  • I am a beginner in the JavaScript world, please explain why typings is not working. So instead typings we should use @types/core-js? If so, why did you include "typings": "2.1.0" package? – Bek Masharipov Mar 16 '17 at 10:56
  • In this case, can remove the **typings** in package.json file. For gulp case, can you try to update the **typescript** version? `"typescript": "^2.2.1"` – neojustice Mar 16 '17 at 12:42
  • Thanks, that is fixed, I am not getting errors right now. But can you please explain why it was not working with typings? – Bek Masharipov Mar 16 '17 at 13:03
  • Welcome, I believe this article will help you to understand (http://stackoverflow.com/questions/37548066/typescript-typings-in-npm-types-org-packages) – neojustice Mar 16 '17 at 13:19
1

The issue due to a recent update in DefinitelyTyped's @types/core-js code (see this GitHub issue for further info).

The book GitHub repository has been recently updated with the following workaround that works well on VS2015 and VS2017. You can either get the updated code from there or patch your local files manually.

If you choose to do this on your own, open your package.json file and replace this:

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

With this:

"scripts": {
    "postinstall": "typings install dt~core-js@0.9.7+20161130133742 --global"
}

This will force Visual Studio to retrieve an explicit (and working) version+build for the core-js typings rather than pick the latest/most recent one. There's no need to uninstall/reinstall anything, as VS should automatically take care of that by updating the /typings/ files accordingly.

For Visual Studio 2017 users, it's worth noting that the GitHub repo contains a VS2017 dedicated branch that can be used by VS2017 users: at the time of writing there are no code changes there, just the one-way upgrade of the .sln and .csproj files. Truth to be told, since VS2017 comes shipped with Typescript 2, removing the typings is also a very viable approach, but it would require further code changes and/or more third-party components updates: the above workaround is the most convenient way to address the issue while leaving the book's printed code as it is.

The issue is also referenced in this post on my blog as a good example of a common scenario that might happen when using third-party libraries.

Darkseal
  • 9,205
  • 8
  • 78
  • 111