Question

我想将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"
    ]
}

Answer 1

我认为问题在于如何向gulp-typescript插件提供源文件和tsconfig.json。尝试完成您的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'));        
});

希望这有帮助。

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

1 个答案: