How to setup gulp-typescript for Angular 2?

Question

currently I'm using tsc compiler with watch flag from prompt. It works well, load all definition files and compile correctly each angular2 file. However is very uncomfortable to use through the shell window.

My goal is to create a gulp task that can translate any typescript file according to angular2 definitions. I've involved gulp-typescript, seems easy to use, so this is the code:

var tsProject = $.typescript.createProject(paths.src + '/tsconfig.json');
gulp.task('typescript', function() {
  gulp
    .src([
      paths.src + '/*.ts'
    ])
    .pipe($.typescript(tsProject)).js
    .pipe(gulp.dest(paths.tmp));
});

And this is the folder structure:

...
src/
---- app/
-------- ts/
------------ *.ts
---- typings/
-------- angular2/
------------ angular2.d.ts
------------ http.d.ts
-------- es6-promise/
------------ ...
-------- rx/
------------ ...
-------- tsd.d.ts
---- *.ts
---- tsconfig.json
gulpfile.js
...

The tsconfig file has no files list, so the compiler should check any ts file inside src (at any level).

When the task is invoked i receive this errors:

error TS2307: Cannot find module 'angular2/angular2'.
error TS2307: Cannot find module 'angular2/http'.

How can I tell to typescript compiler which d.ts files to use?

Answer 1

It is looks like you have not declared amd-reference in your files yet.

Try to declare in files where you import your modules something like that:

/// <amd-dependency path="./src/typings/angular2/angular2.d.ts" />
/// <amd-dependency path="./src/typings/angular2/http.d.ts" />

import angular2 = require("angular2");
import http = require("http")

/// <amd-dependency tells compiler that special modules exists in system and give possibility to compile without errors

Answer 2

I'd recommend to add definitions to gulp.src. Something like this:

var tsProject = $.typescript.createProject(paths.src + '/tsconfig.json');
gulp.task('typescript', function() {
  gulp
    .src([
      paths.src + '/app/**/*.ts',
      paths.src + '/typings/**/*.d.ts'
    ])
    .pipe($.typescript(tsProject)).js
    .pipe(gulp.dest(paths.tmp));
});