Làm thế nào để thiết lập gulp-typescript cho Angular 2?

Question

hiện tại tôi đang sử dụng trình biên dịch tsc với cờ xem từ lời nhắc. Nó hoạt động tốt, tải tất cả các tệp định nghĩa và biên dịch chính xác từng tệp angular2. Tuy nhiên rất khó chịu khi sử dụng qua cửa sổ vỏ.

Mục tiêu của tôi là tạo một tác vụ gulp có thể dịch bất kỳ tệp bản ghi nào theo định nghĩa angular2. Tôi đã tham gia gulp-typescript, dường như dễ sử dụng, vì vậy đây là mã:

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

Và đây là cấu trúc thư mục:

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

File tsconfig không có danh sách files, vì vậy trình biên dịch nên kiểm tra bất kỳ tập tin ts bên trong src (ở mọi cấp độ).

Khi nhiệm vụ được gọi tôi nhận được lỗi này:

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

Làm thế nào tôi có thể nói đến nguyên cảo trình biên dịch mà d.ts file để sử dụng không?

Answer 1

Có vẻ như bạn chưa khai báo amd-reference trong các tệp của mình.

Cố gắng tuyên bố trong các tập tin mà bạn nhập các module của bạn một cái gì đó như thế:

/// <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 nói với trình biên dịch mà module đặc biệt tồn tại trong hệ thống và cung cấp khả năng để biên dịch mà không có lỗi

Answer 2

tôi khuyên bạn nên để thêm định nghĩa vào gulp.src. Một cái gì đó như thế này:

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

Điều này cũng khiến tôi nguyền rủa và chửi thề một lúc. Hãy chắc chắn rằng bạn có điều này trong compilerOptions nút của tsconfig.json của bạn:

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