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?

Answer 1

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.

Answer 2

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

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