Cannot compile ts files with gulp when targeting es5

Question

I've started my first Angular2 app, and I can't use gulp to compile for es5.

Here is the dependencies file:

"dependencies": {
    "@angular/common": "2.0.0",
    "@angular/compiler": "2.0.0",
    "@angular/compiler-cli": "0.6.0",
    "@angular/core": "2.0.0",
    "@angular/forms": "2.0.0",
    "@angular/http": "2.0.0",
    "@angular/platform-browser": "2.0.0",
    "@angular/platform-browser-dynamic": "2.0.0",
    "@angular/router": "3.0.0",
    "@angular/upgrade": "2.0.0",
    "angular2-in-memory-web-api": "0.0.18",
    "bootstrap": "^3.3.6",
    "core-js": "^2.4.1",
    "gulp": "^3.9.1",
    "gulp-htmlmin": "^2.0.0",
    "gulp-rename": "^1.2.2",
    "jquery": "^2.2.0",
    "moment": "^2.14.1",
    "ng2-accordion": "0.0.9",
    "ng2-bootstrap": "^1.1.5",
    "reflect-metadata": "^0.1.3",
    "responsive-directives-angular2": "^0.4.2",
    "rxjs": "5.0.0-beta.11",
    "systemjs": "0.19.27",
    "zone.js": "^0.6.17"
  },
  "devDependencies": {
    "@types/core-js": "^0.9.34",
    "@types/node": "^6.0.41",
    "browser-sync": "^2.16.0",
    "canonical-path": "0.0.2",
    "chai": "^3.5.0",
    "concurrently": "^2.2.0",
    "del": "^2.2.2",
    "gulp": "^3.9.1",
    "gulp-htmlmin": "^2.0.0",
    "gulp-rename": "^1.2.2",
    "gulp-sass": "^2.3.2",
    "gulp-sourcemaps": "^1.6.0",
    "gulp-tslint": "^6.1.1",
    "gulp-typescript": "^2.14.0",
    "http-server": "^0.9.0",
    "jasmine-core": "~2.4.1",
    "karma": "^1.2.0",
    "karma-chai": "^0.1.0",
    "karma-chrome-launcher": "^0.2.3",
    "karma-cli": "^0.1.2",
    "karma-htmlfile-reporter": "^0.2.2",
    "karma-jasmine": "^0.3.8",
    "karma-mocha": "^1.1.1",
    "lite-server": "^2.2.2",
    "lodash": "^4.11.1",
    "mocha": "^3.0.2",
    "node-sass": "^3.10.0",
    "raw-loader": "^0.5.1",
    "rimraf": "^2.5.2",
    "sass-loader": "^4.0.2",
    "tslint": "^3.7.4",
    "typescript": "^2.0.3",
    "typings": "^1.3.2",
    "webpack": "^1.13.2",
    "webpack-dev-server": "^1.14.1",
    "webpack-merge": "^0.14.0"
  }

I have the following tsconfig.json

{
  "compilerOptions": {
    "declaration": false,
    "outDir": "dist/app",
    "target": "es5",
    "mapRoot": "./",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false,
    "suppressImplicitAnyIndexErrors": true
  },
  "exclude": [
    "node_modules"
  ],
  "filesGlob": [
    "./**/*.ts",
    "!./node_modules"
  ]
}

If I compile the app with the tsc command, everything seems to be perfect. I can have my app files on dist/app.

I want to use gulp to automate a lot of things, so I have the following gulp file :

var gulp = require('gulp');
const typescript = require('gulp-typescript');
var tsProject = typescript.createProject('tsconfig.json');
const sourcemaps = require('gulp-sourcemaps');

// TypeScript compile
gulp.task('compile', function () {
  return gulp
    .src(['./app/**/*.ts'])
        .pipe(sourcemaps.init())
    .pipe(typescript(tsProject))
        .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest('dist/app'));
});

When i run gulp compile, I've got a lot of errors like :

/home/user/workspace/projects/node_modules/rxjs/operator/toPromise.d.ts(10,36): error TS2304: Cannot find name 'Promise'
/home/user/workspace/projects/node_modules/rxjs/operator/toPromise.d.ts(10,36): error TS2304: Cannot find name 'Set'
/home/user/workspace/projects/node_modules/rxjs/operator/toPromise.d.ts(10,36): error TS2304: Cannot find name 'Map'

It seems that gulp-typescript can't use ES6 syntax when targeting ES5.

If I change target to es6 in tsconfig.json, everything works. But of course I need an output which works with relatively old browsers.

I've found a lot of suggestions that I've tried, like add some references on the main ts file, but nothing works.

Actually, it's seems that, despite the errors, the app works. I can't understand what really happend here. — tominardi
It looks like it's just not aware of the type definitions. If you are using TypeScript 2, add "typeRoots": ["node_modules/@types"] to the compiler options section of the tsconfig file and see if it can resolve out the types when compiling. — Dave V

tominardi tominardi · Accepted Answer · 2016-10-05T07:57:17

It was a problem with the version of gulp-typescript, which was :

"gulp-typescript": "^2.14.0",

I don't know how this package works, but it's look like it doesn't use the currently installed typescript package but it's own version.

When I upgrade the version, everything works fine.

"gulp-typescript": "^3.0.2",

Cannot compile ts files with gulp when targeting es5

1 Answers