Question

我可以在关于AngularJS 2.0 5 Minute Quickstart的Stackoverflow回答后的IntelliJ IDEA 14.1.4中使用AngularJS 2.0 TypeScript Intellij idea (or webstorm) - ES6 import syntax。

但是，这似乎是针对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 Promise的AngularJS 2.0 Quickstart有关，并且它正在全局安装，但是无法弄清楚如何解决它。

非常感谢你。

Answer 1

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

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

重复标识符'承诺'

将目标es6 lib.d.ts更改为lib.es6.d.ts（this file），其中包含Promise的定义。

推荐修复：

与--nolib汇编并加入lib.d.ts into your project

有关lib.d.ts http://basarat.gitbooks.io/typescript/content/docs/types/lib.d.ts.html

的更多信息

Answer 2

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

<强>解决方案：

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

错误：TS1204：无法将模块编译到＆＃39; commonjs＆＃39;，＆＃39; amd＆＃39;，＆＃39; system＆＃39;或者＆＃39; umd＆＃39;在定位＆＃ES;＆＃39;或更高。

对此的修复是 NOT 指定任何类型的模块。

我的新TypeScript编译器选项：

--experimentalDecorators --target "es6"

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

这包含Promise的定义，它与通过lib.es6.d.ts命令下拉的定义冲突。

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

（感觉就像一个黑客）：我进入tsd文件并删除了以下行：

angular2.d.ts

我必须删除它的原因是///reference path=<"../es6-promise/es6-promise.d.ts"/>在同级别上查找ES6 Promise。由于AngularJS 2.0 TypeScript Type Definition（至少我正在使用的版本，TypeScript compiler已包含ES6承诺）并且它们存在冲突。

Answer 3

Angular2的教程自从Philip回答后发生了变化，它不再使用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"
  ]
}

Answer 4

我很长时间都在努力解决这个问题。我在这里尝试了所有信息而没有运气。我在引导文件中引用了typings。

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

哪些类型具有以下结构

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启动文件中为我做了。

AngularJS 2.0编译为ES6

4 个答案: