Philip Tenn Philip Tenn - 14 days ago 7
AngularJS Question

AngularJS 2.0 compile to ES6

I can get the AngularJS 2.0 5 Minute Quickstart working in my

IntelliJ IDEA 14.1.4
following this Stackoverflow Answer regarding AngularJS 2.0 TypeScript Intellij idea (or webstorm) - ES6 import syntax.

However, this appears to be targeting compilation of
TypeScript
to
EcmaScript 5
.

I wanted to see if I could get
AngularJS 2.0 Typescript
to compile to
EcmaScript 6
.

Issue 1: When I change the
TypeScript
compiler to target
ES6
...

IntelliJ TypeScript compiler

I start getting a
TypeScript
compiler error:

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


I can get around it by removing the
--module "amd"
TypeScript
compiler option.

This does beg the question: without specifying amd, what sort of module format is
ES6
using?

Issue 2:

After modifying the
TypeScript
compiler options so they appear as follows:

IntelliJ TypeScript compiler

I start getting errors regarding:

Error TS2300: Duplicate identifier 'Promise'


TypeScript Error TS2300: Duplicate identifier 'Promise'

Has anyone seen this before? I suspect it has something to do with the
AngularJS 2.0 Quickstart
specifying ES-6 Promise and it being installed globally, but have not been able to figure out how to resolve it.

Thank you very much in advance.

Answer

Okay I've figured out the issues that was preventing me from compiling the AngularJS 2.0 Quickstart into EcmaScript 6 :

Solution:

  1. As basarat mentioned, ES6 does not support amd. I did try specifying --module="system" compiler flag, but that did not work either, still got the error message

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

The fix for that is to NOT specify any sort of module.

My new TypeScript compiler options:

--experimentalDecorators --target "es6" 
  1. The command tsd install angular2 es6-promise rx rx-lite pulls down ES6 promise, as one would expect. The problem is that TypeScript 1.5.3 includes a TypeScript Definition file in the bin called lib.es6.d.ts.

This contains a definition of Promise, which conflicts with the one that was pulled down via the tsd command.

I removed the es6-promise directory from my Angular2 project typings folder (the one that was created by running tsd).

  1. (this felt like a hack): I went into the angular2.d.ts file and removed the following line:

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

The reason I had to remove this is AngularJS 2.0 TypeScript Type Definition looks for ES6 Promise at a peer level. Since the TypeScript compiler (at least the version I am using, TypeScript 1.5.3 contains the ES6 Promise already) and they conflicted.