AngularJS 2.0编译为ES6

Question

我可以让AngularJS 2.0 5分钟快速启动在我的IntelliJ IDEA 14.1.4中工作，遵循关于AngularJS 2.0 TypeScript Intellij (或webstorm) - ES6导入语法的堆栈溢出答案。

然而，这似乎是将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'

​

​

有人见过这个吗？我怀疑这与指定ES-6承诺的AngularJS 2.0 Quickstart有关，而且它是在全球范围内安装的，但是还无法解决这个问题。

先谢谢你。

Answer 1

好的，我已经发现了阻止我将AngularJS 2.0 Quickstart编译成EcmaScript 6的问题：

解决方案：

1. 正如basarat所提到的，ES6不支持amd。我确实尝试过指定--module="system"编译器标志，但这也不起作用，但仍然得到了错误消息。 错误: TS1204:当针对“ES6”或更高版本时，无法将模块编译成“commonjs”、“amd”、“system”或“umd”。

修复方法是而不是指定任何类型的模块。

我的新TypeScript编译器选项：

--experimentalDecorators --target "es6" 

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

这包含了承诺的定义，它与通过tsd命令删除的承诺相冲突。

我从我的Angular2项目typings文件夹(运行tsd创建的文件夹)中删除了typings目录。

1. (这感觉就像一次黑客攻击)：我进入了angular2.d.ts文件并删除了下面的一行： ///reference path=<"../es6-promise/es6-promise.d.ts"/>

我不得不删除它的原因是AngularJS 2.0 TypeScript Type Definition在对等级别寻找ES6承诺。因为TypeScript compiler (至少是我正在使用的版本，TypeScript 1.5.3已经包含了ES6承诺)，所以它们相互冲突。

Answer 2

在不指定amd的情况下，ES6使用哪种模块格式？

对于目标es6，应该只允许system。amd起作用的事实实际上是一个bug。

重复标识符“承诺”

使用目标es6，lib.d.ts更改为lib.es6.d.ts (这个文件)，其中包含了Promise的定义。

建议的解决办法：

• 使用--nolib编译并包含lib.d.ts 进入你的项目

更多关于lib.d.ts http://basarat.gitbooks.io/typescript/content/docs/types/lib.d.ts.html的信息

Answer 3

Angular2教程修改后，菲利普的答案，它不再使用es6 -承诺，但我仍然得到这个错误时，试图转移到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"
  ]
}