Angular 2 Gulp 打字稿编译答案

【问题标题】：Angular 2 Gulp Typescript CompilationAngular 2 Gulp 打字稿编译
【发布时间】：2016-06-15 17:32:00
【问题描述】：

我一直在关注 angular 2 typescript demo。我现在想通过 gulp 使用我自己的构建管道。但是，在尝试使用我的 compile gulp 任务时，我遇到了打字稿编译错误。这是我的项目结构

- project
  |- app
    |- app.component.ts
    |- main.ts
  |- node-modules
  |- typings
  gulpfile.js
  tsconfig.json
  package.json

这是我的 gulpfile

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

gulp.task('compile-app', function() {
    return gulp
        .src('./app/**/*.ts')
        .pipe(ts({
            noImplicitAny: true,
            out: 'output.js'
        }))
        .pipe(gulp.dest('./bin'));
});

当我尝试运行“gulp compile-app”时，出现以下错误

project/node_modules/@angular/core/src/application_ref.d.ts(39,88): error TS2304: Cannot find name 'Promise'.
project/node_modules/@angular/core/src/di/reflective_provider.d.ts(105,123): error TS2304: Cannot find name 'Map'.
project/node_modules/@angular/core/src/facade/collection.d.ts(1,25): error TS2304: Cannot find name 'MapConstructor'.
etc......

我不知道发生了什么。有什么想法吗？

节点 v6.2.1 npm v3.9.3 打字1.0.5

【问题讨论】：

标签： angular typescript gulp gulp-typescript

【解决方案1】：

从您的 gulp 错误来看，您似乎缺少 ES6 功能。如果您将 .tsconfig 目标属性更改为“es6”，它将编译，因为 Promise 和 Map 具有 ES6 定义。这种方法的问题是 ES6 仍然与大多数浏览器不兼容。为了使用这些并以 ES5 为目标，您需要 es6-shim。

使用 Typings ~1.0 及更高版本，您需要使用：

typings install dt~es6-shim --save --global

【讨论】：

刚刚尝试将目标属性设置为“es6”，但是它编译没有问题。但是，尝试安装类型 es6-shim、es6-promise 和 es6-collections 但仍会出现错误。您为我指明了正确的方向，我想我可能必须从一张白纸开始才能确定这一点 - 一切都有些混乱！
同意，它仍然是一个不断发展的目标。我认为 Angular 2 现在使用 core-js 而不是 es6-shim。在快速入门中，这些是您需要的类型：github.com/angular/quickstart/blob/master/typings.json.

【解决方案2】：

我可以通过添加删除构建编译错误

///<reference path="../typings/index.d.ts/"/>

到应用程序的主入口点，在本例中为main.ts，即我引导应用程序的位置。这将为打字稿提供对由打字安装的core-js打字稿定义的正确引用，即，

/// <reference path="globals/core-js/index.d.ts" />

因此 es6 的 shim 定义可以与 es5 浏览器一起使用。

注意：您不需要使用最新版本的 angular (2.0.0-rc.2) 安装 es6-shim。使用核心-js。如果您添加es6-shim 和core-js，您将在打字稿编译期间收到duplicate identifier 错误消息。

【讨论】：