Блог

Я запустил свое первое приложение Angular2 и не могу использовать gulp для компиляции для es5.

Вот файл зависимостей:

 "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"
  }
  

У меня есть следующий 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"
  ]
}
  

Если я скомпилирую приложение с помощью команды tsc, все кажется идеальным. У меня могут быть файлы моего приложения в dist / app.

Я хочу использовать gulp для автоматизации многих вещей, поэтому у меня есть следующий файл gulp :

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

Когда я запускаю компиляцию gulp, у меня много ошибок, таких как :

 /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'
  

Похоже, что gulp-typescript не может использовать синтаксис ES6 при таргетинге на ES5.

Если я изменю цель на es6 в tsconfig.json, все будет работать. Но, конечно, мне нужен вывод, который работает с относительно старыми браузерами.

Я нашел много предложений, которые я пробовал, например, добавить несколько ссылок в основной ts-файл, но ничего не работает.

Это была проблема с версией gulp-typescript, которая была :

 "gulp-typescript": "^2.14.0",
  

Я не знаю, как работает этот пакет, но похоже, что он использует не установленный в данный момент пакет typescript, а его собственную версию.

Когда я обновляю версию, все работает нормально.

 "gulp-typescript": "^3.0.2",