Angular 2 TypeScript Errors

Question

I've followed the quick start on the angular 2 site. I'm attempting to get my gulpfile setup property to transpile my typescript inside of my Visual Studio aspnetcore project. I'm using typescript 1.8.10, not the 2.0 beta that has a solution posted for it elsewhere on SO.

I'm getting 70 of these errors when running the "ts2" task:

c:/path/to/my/project/Quickstart/node_modules/@angular/common/src/pipes/async_pipe.d.ts(41,38): error TS2304: Cannot find name 'Promise'. c:/path/to/my/project/Quickstart/node_modules/@angular/compiler/src/compile_metadata.d.ts(347,20): error TS2304: Cannot find name 'Set'. c:/path/to/my/project/Quickstart/node_modules/@angular/compiler/src/compile_metadata.d.ts(348,15): error TS2304: Cannot find name 'Set'. c:/path/to/my/project/Quickstart/node_modules/@angular/compiler/src/directive_normalizer.d.ts(19,100): error TS2304: Cannot find name 'Promise'.

My Gulpfile.js:

var ts = require("gulp-typescript");
var gulp = require('gulp');
var clean = require("gulp-clean");

// Delete the dist directory
gulp.task("clean", function () {
    return gulp.src(destPath)
        .pipe(clean());
});

gulp.task("scriptsNStyles", () => {
    gulp.src([
            "core-js/client/**",
            "systemjs/dist/system.src.js",
            "reflect-metadata/**",
            "rxjs/**",
            "zone.js/dist/**",
            "@angular/**",
            "jquery/dist/jquery.*js"
    ], {
        cwd: "node_modules/**"
    })
        .pipe(gulp.dest("./wwwroot/lib"));
});

var tsProject = ts.createProject("./tsconfig.json");
gulp.task("ts", function (done) {
    //var tsResult = tsProject.src()
    var paths = {
        scripts: ['./wwwroot/app/*.ts']
    };

    gulp.src(paths.scripts).pipe(gulp.dest('wwwroot/app'));
});

gulp.task('ts2', function (done) {
    var tsResult = gulp.src([
            "wwwroot/app/*.ts"
    ])
        .pipe(ts(tsProject), undefined, ts.reporter.fullReporter());
    return tsResult.js.pipe(gulp.dest('./wwwroot/app'));
});


gulp.task("watch", ["watch.ts"]);

gulp.task("watch.ts", ["ts"], function () {
    return gulp.watch("./wwwroot/app/*.ts", ["ts"]);
});

gulp.task("default", ["scriptsNStyles", "watch"]);

tsconfig.json:

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  },
  "exclude": [
    "node_modules",
    "typings/index",
    "typings/index.d.ts",
    "wwwroot/lib"
  ],
  "compileOnSave": true
}

package.json:

{
  "version": "1.0.0",
  "name": "asp.net",
  "scripts": {
    "postinstall": "typings install",
    "typings": "typings"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "2.0.0-rc.7",
    "@angular/compiler": "2.0.0-rc.7",
    "@angular/compiler-cli": "0.6.1",
    "@angular/core": "2.0.0-rc.7",
    "@angular/forms": "2.0.0-rc.7",
    "@angular/http": "2.0.0-rc.7",
    "@angular/platform-browser": "2.0.0-rc.7",
    "@angular/platform-browser-dynamic": "2.0.0-rc.7",
    "@angular/router": "3.0.0-rc.3",
    "@angular/upgrade": "2.0.0-rc.7",
    "core-js": "^2.4.1",
    "reflect-metadata": "^0.1.3",
    "rxjs": "5.0.0-beta.12",
    "systemjs": "0.19.27",
    "zone.js": "^0.6.21",
    "angular2-in-memory-web-api": "0.0.19",
    "bootstrap": "^3.3.6"
  },
  "devDependencies": {
    "typescript": "^1.8.10",
    "gulp": "^3.9.1",
    "path": "^0.12.7",
    "gulp-clean": "^0.3.2",
    "gulp-concat": "^2.6.0",
    "gulp-typescript": "^2.13.6",
    "typings": "^1.3.1",
    "gulp-tsc": "^1.2.0"
  }
}

Typings.json:

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

Transpilation seems to work, but I don't like the errors. How do I fix this?

This is an issue with types not being found. Here is a similar question. stackoverflow.com/questions/35660498/… Looks like you probably need the core-js types — khollenbeck
– khollenbeck, Commented Sep 14, 2016 at 15:34
I've run into this issue behind a corporate proxy/filters. In my case, typings could not be installed due to having to be accessed over SSL. If you find this is the issue, I can explain how to get around it. Though there are many questions here that address the issue. — ethesx
– ethesx, Commented Sep 14, 2016 at 15:37
@KrisHollenbeck My devDependencies section references TypeScript 1.8.10 — Darthg8r
– Darthg8r, Commented Sep 14, 2016 at 15:43

David Rinck · Accepted Answer · 2016-09-27 20:36:43Z

4

Typings will be deprecated with Typescript 2.0 onwards. An easier solution is to use the npm type definition packages. I know you asked for a 1.8 solution, but my strong suggestion is to remove Typings now!

Download Typescript 2.0.2 or higher from Microsoft. https://www.microsoft.com/en-us/download/details.aspx?id=48593 or install from npm: npm install -g typescript
add the following lines to your package.json file "@types/core-js": "^0.9.32", "@types/jasmine": "^2.2.33", and "@types/node": "^6.0.38", or use the command line: npm install @types/core-js @types/jasmin @types/node --save-dev
In your tsconfig.json file add the following:

tsconfig.json

"typeRoots": [
  "node_modules/@types"
 ],
 "types": [
   "core-js",
   "jasmine",
   "node"
 ]

The core-js type definitions will get rid of your Promise and Set definition errors.

In typescript 2.0 the type definitions are much easier to use. You go through the same process to pull definitions for lodash, d3, or any other js library you want to use. You can find typings with Microsoft's TypeSearch website. Read more about it on Microsoft's blog: https://blogs.msdn.microsoft.com/typescript/2016/06/15/the-future-of-declaration-files/

You'll want to update your devDependencies to "typescript": "^2.0.2". or npm install typescript --save-dev

To update your gulpfile to use the latest version of typescript change your tsProject line to this:

var tsProject = ts.createProject('tsconfig.json', {
  typescript: require('typescript')
});

See gulp-typescript documentation on Github for more info.

edited Sep 27, 2016 at 20:36

answered Sep 14, 2016 at 19:46

David Rinck

7,0565 gold badges48 silver badges65 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Darthg8r Over a year ago

I'm going to give this a try. Do I need to make any changes to my devDependencies section of my packages.json file?

David Rinck Over a year ago

yes. You'll need to update your devDependencies to 2.0.2 and make a small change to your gulpfile.js. I update the answer with more info.

gomisha · Accepted Answer · 2018-06-22 21:29:50Z

0

Try updating the tsconfig.json's compilerOptions target property to "es6", since Sets and Promises were only made available in ES6.

{
  "compilerOptions": {
    "target": "es6",
...
}

answered Jun 22, 2018 at 21:29

gomisha

2,9984 gold badges28 silver badges33 bronze badges

Collectives™ on Stack Overflow

Angular 2 TypeScript Errors

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related