AngularJS 2.0 compile to ES6

Question

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 ...

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:

I start getting errors regarding:

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 1

without specifying amd, what sort of module format is ES6 using?

With target es6 only system is supposed to be allowed. The fact that amd worked is actually a bug.

Duplicate identifier 'Promise'

With target es6 lib.d.ts changes into lib.es6.d.ts (this file) which has an included definition for Promise.

Recommended fix:

• Compile with --nolib and include lib.d.ts into your project

More about lib.d.ts http://basarat.gitbooks.io/typescript/content/docs/types/lib.d.ts.html

Answer 2

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" 

2. 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).

3. (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.

Answer 3

Tutorial for Angular2 changed since answer by Philip, it no longer uses es6-promise but I still get this error when trying to transpile to es6.

The trick is to exclude the browser typings when using es6. You can do that adding "typings/browser", "typings/browser.d.ts", to the exclude option in tsconfig.js.

If you are transpiling to es6 use:

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

If you are transpiling to es5 then use:

{
  "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

I was struggling with this for a long time. I tried all information here with no luck. I was referencing typings in my boot file.

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

Where typings has the following structure

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

I had also removed the @type node module completely. Also trying various 'excludes' and 'types' in the tsconfig.json file. Without success.

After much messing around I found if I just included 'node' index.d.ts and not the other content from 'typings' it worked fine.

Hence

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

in my Angular 2 boot file did it for me.