为什么使用 gulp-typescript 编译 angularjs 2 项目需要参考路径答案

【问题标题】：Why is reference path needed to compile anglularjs 2 project with gulp-typescript为什么使用 gulp-typescript 编译 angularjs 2 项目需要参考路径
【发布时间】：2016-02-16 12:45:21
【问题描述】：

我想将 Angular Tour Of Heros 项目更改为使用 gulp Github Repo 构建。

我创建了以下gulpfile.json：

const gulp = require('gulp');
const del = require('del');
const typescript = require('gulp-typescript');
const tscConfig = require('./tsconfig.json');

// clean the contents of the distribution directory
gulp.task('clean', function () {
  return del('dist/**/*');
});

// TypeScript compile
gulp.task('compile', ['clean'], function () {
  return gulp
    .src('app/**/*.ts')
    .pipe(typescript(tscConfig.compilerOptions))
    .pipe(gulp.dest('dist/app'));
});

gulp.task('build', ['compile']);
gulp.task('default', ['build']);

当我运行gulp compile 时出现以下错误：

...
app/hero.service.ts(7,16): error TS2304: Cannot find name 'Promise'.
app/hero.service.ts(11,16): error TS2304: Cannot find name 'Promise'.
...

但是当我使用 typescript 编译器tsc 编译时，编译效果很好。

为了使用 gulp 编译它，我必须在 app/main.ts 中添加以下引用路径：

///<reference path="../node_modules/angular2/typings/browser.d.ts"/>
import {bootstrap}    from 'angular2/platform/browser'
import {AppComponent} from './app.component'

bootstrap(AppComponent);

为什么我必须使用 gulp-typescript 而不是 tsc？

这里是tsconfig.json：

{
    "compilerOptions": {
        "outDir": "dist/app",
        "target": "es5",
        "module": "system",
        "moduleResolution": "node",
        "sourceMap": true,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "removeComments": false,
        "noImplicitAny": false
    },
    "exclude": [
        "node_modules",
        "typings/main",
        "typings/main.d.ts"
    ]
}

【问题讨论】：

标签： angular typescript gulp

【解决方案1】：

我认为问题在于如何将源文件和 tsconfig.json 提供给 gulp-typescript 插件。尝试让你的 gulp 任务如下：

var typescript = require('gulp-typescript');

gulp.task('compile', function() 
{
    var tsProject = typescript.createProject('tsconfig.json');
    var tsResult = tsProject.src().pipe(typescript(tsProject));

    return tsResult.js.pipe(gulp.dest('dist/app'));        
});

希望这会有所帮助。

【讨论】：