How to configure gulp - typescript for Angular 2?

Question

I am currently using the tsc compiler with the flag flag from the prompt. It works well, downloads all definition files, and compiles each angular2 file correctly. However, it is very inconvenient to use it through the shell window.

My goal is to create a gulp task that can translate any typescript file according to angular2 definitions. I have included gulp-typescript , it 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 ... 

There are no files tsconfig file, so the compiler should check any ts file inside src (at any level).

When I call the task, I get the following errors:

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

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

Answer 1

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

Try declaring in the files where you import your modules something like this:

 /// <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 the compiler that there are special modules in the system and the ability to compile without errors

Answer 2

I would recommend adding definitions to gulp.src. Something like that:

 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)); }); 

Answer 3

It also made me swear and swear for a while. Make sure you have this in the compilerOptions node of your tsconfig.json:

 { "compilerOptions": { "moduleResolution": "node", } }