I wanted to modify the Angular Tour Of Heros project to utilize gulp from this Github Repository.
This is the gulpfile.json file I came up with:
const gulp = require('gulp');
const del = require('del');
const typescript = require('gulp-typescript');
const tscConfig = require('./tsconfig.json');
// Cleaning the distribution directory
gulp.task('clean', function () {
return del('dist/**/*');
});
// Compiling TypeScript
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']);
When running gulp compile, an error occurred:
...
app/hero.service.ts(7,16): error TS2304: Cannot find name 'Promise'.
app/hero.service.ts(11,16): error TS2304: Cannot find name 'Promise'.
...
However, compiling using the typescript compiler tsc works flawlessly.
To make it work with gulp, I had to include the following reference path in 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);
Why is it necessary to add this with gulp-typescript but not with tsc?
Below is the content of 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"
]
}