AngularJS 2.0编译为ES6

Question

我可以在我的关于AngularJS 2.0 TypeScript Intellij想法(或webstorm) - ES6导入语法的 Stackoverflow答案中使用AngularJS 2.0 5分钟快速入门.IntelliJ IDEA 14.1.4

然而,这似乎是针对编译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有关,它在全球范围内安装,但无法弄清楚如何解决它.

非常感谢你提前.

Answer 1

没有指定amd,ES6使用什么样的模块格式？

对于目标es6 system,应该只允许.有效的事实amd实际上是一个错误.

重复标识符'承诺'

将目标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 2

好吧,我已经找出了阻止我将AngularJS 2.0Quickstart 编译成以下内容的问题EcmaScript 6:

解:

1. 如上所述,ES6不支持amd.我确实尝试指定--module="system"编译器标志,但这也不起作用,仍然得到错误消息

   错误:TS1204:在定位"ES6"或更高版本时,无法将模块编译为"commonjs","amd","system"或"umd".

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

我的新TypeScript编译器选项:

--experimentalDecorators --target "es6" 

2. tsd install angular2 es6-promise rx rx-lite正如人们所预料的那样,该命令可以降低ES6的承诺.问题是在被叫中TypeScript 1.5.3包含a . TypeScript Definition filebinlib.es6.d.ts

这包含Promise的定义,它与通过tsd命令下拉的定义冲突.

我es6-promise从Angular2项目typings文件夹(通过运行创建的文件夹)中删除了该目录tsd.

3. (这感觉就像一个黑客):我进入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)并且它们存在冲突.

Answer 3

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

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

如果您正在转换为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"
  ]
}