如何为 Angular 2 设置 gulp-typescript？答案

【问题标题】：How to setup gulp-typescript for Angular 2?如何为 Angular 2 设置 gulp-typescript？
【发布时间】：2015-12-30 00:38:30
【问题描述】：

目前我正在使用tsc 编译器和提示中的监视标志。它运行良好，加载所有定义文件并正确编译每个 angular2 文件。但是通过外壳窗口使用非常不舒服。

我的目标是创建一个 gulp 任务，它可以根据 angular2 定义翻译任何打字稿文件。我参与了gulp-typescript，看起来好用，所以代码如下：

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

这是文件夹结构：

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

tsconfig 文件没有files 列表，因此编译器应检查src 内的任何ts 文件（在任何级别）。

当任务被调用时，我收到这个错误：

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

如何告诉 typescript 编译器使用哪些 d.ts 文件？

【问题讨论】：

你有没有像/// <amd-dependency path="typings/angular2/angular2.d.ts" />这样在你的文件中声明amd-references？
看看这个项目，它可能有用：ng2-play.ts

标签： javascript typescript gulp ecmascript-6 angular

【解决方案1】：

您似乎还没有在文件中声明amd-reference。

尝试在导入模块的文件中声明类似的内容：

/// <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 告诉编译器系统中存在特殊模块，并提供编译没有错误的可能性

【讨论】：

谢谢！很容易，当我开始项目时，我使用了这些参考线，但tsc 也没有，所以我删除了它们。现在我可以再次说欢迎了！
很高兴为您提供帮助！:) 祝您好运！

【解决方案2】：

我建议将定义添加到 gulp.src。像这样的：

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

【讨论】：

【解决方案3】：

这也让我诅咒和咒骂了一段时间。确保在 tsconfig.json 的 compilerOptions 节点中有这个：

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

【讨论】：