简体   繁体   English

带有Angular2的打字稿-定位ES5会产生错误?

[英]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. 我正在使用npm -v =>3.10.10 ,我想运行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 : 所以现在package.json看起来像:

{
  "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 : tsconfig.json看起来像:

{
  "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 ) : 现在,我在cmd运行gulp ,并且站点正常运行( 这是gulpFile.js文件 ):

But looking at the cmd - I see many warnings : 但是看着cmd- 我看到很多警告

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 我已经安装了npm install @types/core-js --save-dev

And

Changed the content of tsconfig.json from : tsconfig.json的内容从更改为:

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

Now it looks good: 现在看起来不错:

在此处输入图片说明

Question

The errors were becuase Map , Set and Promise are ES6 features. 错误是因为MapSetPromiseES6功能。 -Which causes the compiler the use the normal es5 lib.d.ts which lacks the definitions for the above types. -这会导致编译器使用普通的es5 lib.d.ts ,而缺少上述类型的定义。

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 ? 另外-如何“ ES5'y”我的代码?

PS 聚苯乙烯

Other solution states that changing the TS file to : 其他解决方案指出将TS文件更改为:

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

Should work. 应该管用。 But it's not. 但事实并非如此。 still same errors. 还是一样的错误。

you are trying to download a deprecated version of angular2 : 您正在尝试下载不再推荐使用的angular2版本:

use @angular/cli because everything ( tsconfig , @types/ and shims ) is configured for you : 使用@ angular / cli,因为所有内容( tsconfig@types/shimstsconfig为您配置:

npm install @angular/cli -g 

ng new myApp

cd myApp

ng serve

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM