AngularJS 2.0 编译为 ES6答案

【问题标题】：AngularJS 2.0 compile to ES6AngularJS 2.0 编译为 ES6
【发布时间】：2015-10-25 22:01:53
【问题描述】：

我可以让AngularJS 2.0 5 Minute Quickstart 在我的IntelliJ IDEA 14.1.4 中工作，遵循关于AngularJS 2.0 TypeScript Intellij idea (or webstorm) - ES6 import syntax 的 Stackoverflow 答案。

但是，这似乎是针对 TypeScript 到 EcmaScript 5 的编译。

我想看看是否可以让AngularJS 2.0 Typescript 编译为EcmaScript 6。

问题 1： 当我将 TypeScript 编译器更改为目标 ES6 ...

我开始收到TypeScript 编译器错误：

Error: TS1204: Cannot compile modules into 'commonjs', 'amd', 'system', or 'umd' 
when targeting 'ES6' or higher.

我可以通过删除 --module "amd" TypeScript 编译器选项来解决它。

这确实引出了一个问题：没有指定 amd，ES6 使用什么样的模块格式？

问题 2：

修改TypeScript 编译器选项后，如下所示：

我开始收到以下方面的错误：

Error TS2300: Duplicate identifier 'Promise'

有人见过这个吗？我怀疑它与 AngularJS 2.0 Quickstart 指定 ES-6 Promise 并在全球范围内安装有关，但无法弄清楚如何解决它。

非常感谢您。

【问题讨论】：

你想编译成 ES6 吗？
@Bergi 没有务实的理由......我正在尝试学习 Angular 2.0、TypeScript、ES6。在此过程中，我正在测试边界并尝试确保我可以编译为 ES6，因为它已尽可能地记录在案。
有人发布了关于该问题的问题here。此外，es6 有自己的模块格式，请参阅this question。

标签： angular typescript ecmascript-6

【解决方案1】：

不指定amd，ES6使用什么样的模块格式？

对于目标 es6，应该只允许 system。 amd 工作的事实实际上是一个错误。

重复标识符“承诺”

使用目标 es6 lib.d.ts 更改为 lib.es6.d.ts (this file)，其中包含 Promise 的定义。

推荐修复：

使用--nolib 编译并包含lib.d.ts into your project

【讨论】：

【解决方案2】：

好的，我已经找出了阻止我将 AngularJS 2.0 快速入门编译为 EcmaScript 6 的问题：

解决方案：

正如 basarat 所说，ES6 不支持amd。我确实尝试指定 --module="system" 编译器标志，但这也不起作用，仍然收到错误消息

错误：TS1204：针对“ES6”或更高版本时，无法将模块编译为“commonjs”、“amd”、“system”或“umd”。

解决方法是不指定任何类型的模块。

我的新TypeScript 编译器选项：

--experimentalDecorators --target "es6"

命令tsd install angular2 es6-promise rx rx-lite 拉低ES6 承诺，正如人们所期望的那样。问题是TypeScript 1.5.3 在名为lib.es6.d.ts 的bin 中包含一个TypeScript Definition file。

这包含一个 Promise 的定义，它与通过tsd 命令下拉的那个冲突。

我从我的 Angular2 项目 typings 文件夹（通过运行 tsd 创建的文件夹）中删除了 es6-promise 目录。

（这感觉像是一个 hack）：我进入 angular2.d.ts 文件并删除了以下行：

///reference path=<"../es6-promise/es6-promise.d.ts"/>

我不得不删除它的原因是 AngularJS 2.0 TypeScript Type Definition 在同等级别寻找 ES6 Promise。由于TypeScript compiler（至少我正在使用的版本，TypeScript 1.5.3 已经包含 ES6 Promise）并且它们发生了冲突。

【讨论】：

【解决方案3】：

自从 Philip 回答后，Angular2 的教程发生了变化，它不再使用 es6-promise，但在尝试转换为 es6 时仍然出现此错误。

诀窍是在使用 es6 时排除浏览器类型。您可以将"typings/browser", "typings/browser.d.ts", 添加到 tsconfig.js 中的排除选项中。

如果您要转译为 es6，请使用：

{
  "compilerOptions": {
    "target": "es6",
    "module": "system",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  },
  "exclude": [
    "node_modules",
    "typings/browser",
    "typings/browser.d.ts",
    "typings/main",
    "typings/main.d.ts"
  ]
}

如果您要转译为 es5，请使用：

{
  "compilerOptions": {
    "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"
  ]
}

【讨论】：

谢谢！我有点理解排除项，但是直到我将模块更改为 system 而不是 commonjs （或用最后一个 es5 替换我的整个 tsconfig）它才会起作用。似乎很多人会在旧教程中遇到这个问题，认为这是旧版本的打字稿问题......

【解决方案4】：

我为此苦苦挣扎了很长时间。我在这里尝试了所有信息，但没有运气。我在我的引导文件中引用了类型。

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

typings 的结构如下

typings -- globals ---- es6-collections ---- es6-promise ---- node

我还完全删除了@type 节点模块。还在 tsconfig.json 文件中尝试各种“排除”和“类型”。没有成功。

经过一番折腾，我发现如果我只包含“node”index.d.ts 而不是“typings”中的其他内容，它就可以正常工作。

因此

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

在我的 Angular 2 启动文件中为我做了。

【讨论】：