Typescript with Angular2 - Targeting ES5 yields errors?

Question

I'm using npm -v =>3.10.10 and I want to run a new project (empty one) of Angular2.

If I write

npm isntall angular2 --save

I get this :

But after reading this answer which states :

You may need to manually install top-level modules that have unmet dependencies:

— I did this:

• npm isntall es6-shim@^0.35.0 --save
• npm isntall reflect-metadata@0.1.2 --save
• npm isntall rxjs@5.0.0-beta.6 --save
• npm isntall zone.js@^0.6.12 --save

So now I have this :

So now package.json looks like :

{
  "name": "AngularJS2",
  "version": "1.0.0",
  "author": "Ray Villalobos",
  "description": "...",
  "repository": {
    "type": "git",
    "url": "https://github.com/planetoftheweb/angular2.git"
  },
  "devDependencies": {
      "gulp": "^3.9.0",
    "gulp-sourcemaps": "^1.6.0",
    "gulp-typescript": "^2.10.0",
    "gulp-webserver": "^0.9.1"

  },
  "dependencies": {
    "angular2": "^2.0.0-beta.21",
    "es6-shim": "^0.35.0",
    "reflect-metadata": "^0.1.2",
    "rxjs": "^5.0.0-beta.6",
    "zone.js": "^0.6.12"
  }
}

And tsconfig.json looks like :

{
  "compilerOptions": {
    "target": "es5",
    "module": "system",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  },
  "exclude": [
   "node_modules"

  ]
}

Now I run gulp in cmd and the site is up and running fine ( this is the gulpFile.js file) :

But looking at the cmd - I see many warnings :

C:\Users\sff\Desktop\1>gulp [11:39:33] Using gulpfile
~\Desktop\1\gulpfile.js [11:39:33] Starting 'copylibs'... [11:39:33]
Starting 'typescript'... [11:39:33] Starting 'watch'... [11:39:33]
Finished 'watch' after 22 ms [11:39:33] Starting 'webserver'...
[11:39:33] Webserver started at http://localhost:8000 [11:39:33]
Finished 'webserver' after 8.84 ms
C:/Users/sff/Desktop/1/node_modules/angular2/platform/browser.d.ts(78,90):
error TS2304: Cannot find name 'Promise'.
C:/Users/sff/Desktop/1/node_modules/angular2/src/core/application_ref.d.ts(38,88):
error TS2304: Cannot find name 'Promise'.
C:/Users/sff/Desktop/1/node_modules/angular2/src/core/application_ref.d.ts(92,42):
error TS2304: Cannot find name 'Promise'.
C:/Users/sff/Desktop/1/node_modules/angular2/src/core/application_ref.d.ts(151,33):
error TS2304: Cannot find name 'Promise'.
C:/Users/sff/Desktop/1/node_modules/angular2/src/core/change_detection/differs/default_keyvalue_differ.d.ts(23,15):
error TS2304: Cannot find name 'Map'.
C:/Users/sff/Desktop/1/node_modules/angular2/src/core/change_detection/differs/default_keyvalue_differ.d.ts(25,16):
error TS2304: Cannot find name 'Map'.
C:/Users/sff/Desktop/1/node_modules/angular2/src/core/di/reflective_provider.d.ts(103,123):
error TS2304: Cannot find name 'Map'.
C:/Users/sff/Desktop/1/node_modules/angular2/src/core/di/reflective_provider.d.ts(103,165):
error TS2304: Cannot find name 'Map'.

However - I've already found the solution :

• I've installed npm install @types/core-js --save-dev

And

Changed the content of tsconfig.json from :

"target": "es5" ---to ---> "target": "es6"

Now it looks good:

Question

The errors were becuase Map, Set and Promise are ES6 features. -Which causes the compiler the use the normal es5 lib.d.ts which lacks the definitions for the above types.

But now things won't work as they should becuase not all browsers supports this.

• Is this the right way of fixing the warnings? Also - How can I "ES5'y" my code ?

PS

Other solution states that changing the TS file to :

 "target": "es5",
 "lib": ["es5", "es6", "dom"],

Should work. But it's not. still same errors.

Answer 1

you are trying to download a deprecated version of angular2 :

use @angular/cli because everything (tsconfig, @types/ and shims) is configured for you :

npm install @angular/cli -g 

ng new myApp

cd myApp

ng serve