8

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.

Improve this question
3
  • WTH would you want to compile to ES6? Commented Aug 3, 2015 at 17:50
  • @Bergi No pragmatic reason ... I am trying to learn Angular 2.0, TypeScript, ES6. In the process, I'm testing the boundaries and trying to make sure that I can compile to ES6 since it was documented as possible to do. Commented Aug 3, 2015 at 19:13
  • Somebody posted an issue here about the problem. Also, es6 has its own module format see this question. Commented Aug 3, 2015 at 21:16

4 Answers 4

Reset to default
5

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:

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

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

5

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.

Improve this answer

Comments

5

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"
  ]
}
Improve this answer

1 Comment

Thank You! I sort of understand the excludes, but until I changed the module to system instead of commonjs (or replaced my entire tsconfig with this last es5 one) it wouldn't work. It seems a lot of people will face this issue with old tutorials, thinking it's an old version of typescript issue...
1

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.

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.