CODEWITHSUNDEEP
javascriptnode.jsangulartypescriptnpm
Royi Namir
Royi Namir

Reputation: 148514

Typescript with Angular2 - Targeting ES5 yields errors?

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 :

enter image description here

But after reading this answer which states :

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

— I did this:

So now I have this :

enter image description here

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 :

And

Changed the content of tsconfig.json from :

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

Now it looks good:

enter image description here

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.

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.

Upvotes: 0

Views: 217

Answers (1)

El houcine bougarfaoui
El houcine bougarfaoui

Reputation: 37343

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

Upvotes: 1

Related Questions