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"
  ]
}
Improve this question

2 Answers 2

Reset to default
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/[email protected] --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"
  }
Improve this answer
Sign up to request clarification or add additional context in comments.

9 Comments

When I changed "scripts": { "postinstall": "typings install core-js --global"} and clicked on save, I got errors in npm output :
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.
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.
Sorry for my first typo, it should be typings uninstall core-js --global. That command will uninstall the core-js under typings\globals folder.
Ok, removing typings fixed issue, now I can build my project with Vs2017 without errors. But Gulp is still showing errors
|
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 [email protected]+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.

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.