Javascript Angular:找不到 Promise、Map、Set 和 Iterator

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/35660498/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-23 18:05:46  来源:igfitidea点击:

Angular: Can't find Promise, Map, Set and Iterator

javascriptangulartypescript

提问by Stav Alfi

After installing Angular, the Typescript compiler keep getting some errors about not finding Promise, Map, Setand Iterator.

安装角之后,打字稿编译器的愈来愈约没有找到一些错误PromiseMapSetIterator

Until now I ignored them but now I need Promiseso my code can work.

直到现在我都忽略了它们,但现在我需要Promise这样我的代码才能工作。

import {Component} from 'angular2/core';
@Component({
    selector: 'greeting-cmp',
    template: `<div>{{ asyncGreeting | async}}</div>`
})
export class GreetingCmp {
    asyncGreeting: Promise<string> = new Promise(resolve => {
// after 1 second, the promise will resolve
        window.setTimeout(() => resolve('hello'), 1000);
    });
}

Additional information:
npm -v is 2.14.12
node -v is v4.3.1
typescript v is 1.6

The errors:

错误:

................ERROS OF MY CODE.................
    C:\Users\armyTik\Desktop\angular2\greeting_cmp.ts
    Error:(7, 20) TS2304: Cannot find name 'Promise'.
    Error:(7, 42) TS2304: Cannot find name 'Promise'.
    .........................................
    C:\Users\armyTik\Desktop\angular2\node_modules\angular2\platform\browser.d.ts
    Error:(77, 90) TS2304: Cannot find name 'Promise'.
    C:\Users\armyTik\Desktop\angular2\node_modules\angular2\src\core\application_ref.d.ts
    Error:(83, 60) TS2304: Cannot find name 'Promise'.
    Error:(83, 146) TS2304: Cannot find name 'Promise'.
    Error:(96, 51) TS2304: Cannot find name 'Promise'.
    Error:(96, 147) TS2304: Cannot find name 'Promise'.
    Error:(133, 90) TS2304: Cannot find name 'Promise'.
    Error:(171, 81) TS2304: Cannot find name 'Promise'.
    C:\Users\armyTik\Desktop\angular2\node_modules\angular2\src\core\change_detection\parser\locals.d.ts
    Error:(3, 14) TS2304: Cannot find name 'Map'.
    Error:(4, 42) TS2304: Cannot find name 'Map'.
    C:\Users\armyTik\Desktop\angular2\node_modules\angular2\src\core\debug\debug_node.d.ts
    Error:(14, 13) TS2304: Cannot find name 'Map'.
    Error:(24, 17) TS2304: Cannot find name 'Map'.
    Error:(25, 17) TS2304: Cannot find name 'Map'.
    C:\Users\armyTik\Desktop\angular2\node_modules\angular2\src\core\di\provider.d.ts
    Error:(436, 103) TS2304: Cannot find name 'Map'.
    Error:(436, 135) TS2304: Cannot find name 'Map'.
    C:\Users\armyTik\Desktop\angular2\node_modules\angular2\src\core\linker\compiler.d.ts
    Error:(12, 50) TS2304: Cannot find name 'Promise'.
    Error:(16, 41) TS2304: Cannot find name 'Promise'.
    C:\Users\armyTik\Desktop\angular2\node_modules\angular2\src\core\linker\dynamic_component_loader.d.ts
    Error:(108, 136) TS2304: Cannot find name 'Promise'.
    Error:(156, 150) TS2304: Cannot find name 'Promise'.
    Error:(197, 128) TS2304: Cannot find name 'Promise'.
    Error:(203, 127) TS2304: Cannot find name 'Promise'.
    Error:(204, 141) TS2304: Cannot find name 'Promise'.
    Error:(205, 119) TS2304: Cannot find name 'Promise'.
    C:\Users\armyTik\Desktop\angular2\node_modules\angular2\src\core\render\api.d.ts
    Error:(13, 13) TS2304: Cannot find name 'Map'.
    Error:(14, 84) TS2304: Cannot find name 'Map'.
    C:\Users\armyTik\Desktop\angular2\node_modules\angular2\src\facade\async.d.ts
    Error:(27, 33) TS2304: Cannot find name 'Promise'.
    Error:(28, 45) TS2304: Cannot find name 'Promise'.
    C:\Users\armyTik\Desktop\angular2\node_modules\angular2\src\facade\collection.d.ts
    Error:(1, 25) TS2304: Cannot find name 'MapConstructor'.
    Error:(2, 25) TS2304: Cannot find name 'SetConstructor'.
    Error:(4, 27) TS2304: Cannot find name 'Map'.
    Error:(4, 39) TS2304: Cannot find name 'Map'.
    Error:(7, 9) TS2304: Cannot find name 'Map'.
    Error:(8, 30) TS2304: Cannot find name 'Map'.
    Error:(11, 43) TS2304: Cannot find name 'Map'.
    Error:(12, 27) TS2304: Cannot find name 'Map'.
    Error:(14, 23) TS2304: Cannot find name 'Map'.
    Error:(15, 25) TS2304: Cannot find name 'Map'.
    Error:(95, 41) TS2304: Cannot find name 'Set'.
    Error:(96, 22) TS2304: Cannot find name 'Set'.
    Error:(97, 25) TS2304: Cannot find name 'Set'.
    C:\Users\armyTik\Desktop\angular2\node_modules\angular2\src\facade\lang.d.ts
    Error:(13, 17) TS2304: Cannot find name 'Map'.
    Error:(14, 17) TS2304: Cannot find name 'Set'.
    Error:(78, 59) TS2304: Cannot find name 'Map'.
    C:\Users\armyTik\Desktop\angular2\node_modules\angular2\src\facade\promise.d.ts
    Error:(2, 14) TS2304: Cannot find name 'Promise'.
    Error:(7, 32) TS2304: Cannot find name 'Promise'.
    Error:(8, 38) TS2304: Cannot find name 'Promise'.
    Error:(9, 35) TS2304: Cannot find name 'Promise'.
    Error:(9, 93) TS2304: Cannot find name 'Promise'.
    Error:(10, 34) TS2304: Cannot find name 'Promise'.
    Error:(11, 32) TS2304: Cannot find name 'Promise'.
    Error:(11, 149) TS2304: Cannot find name 'Promise'.
    Error:(12, 43) TS2304: Cannot find name 'Promise'.
    C:\Users\armyTik\Desktop\angular2\node_modules\angular2\src\http\headers.d.ts
    Error:(43, 59) TS2304: Cannot find name 'Map'.
    C:\Users\armyTik\Desktop\angular2\node_modules\angular2\src\http\url_search_params.d.ts
    Error:(11, 16) TS2304: Cannot find name 'Map'.
    C:\Users\armyTik\Desktop\angular2\node_modules\angular2\src\platform\browser\browser_adapter.d.ts
    Error:(75, 33) TS2304: Cannot find name 'Map'.
    C:\Users\armyTik\Desktop\angular2\node_modules\angular2\src\platform\dom\dom_adapter.d.ts
    Error:(85, 42) TS2304: Cannot find name 'Map'.
    C:\Users\armyTik\Desktop\angular2\node_modules\rxjs\CoreOperators.d.ts
    Error:(35, 67) TS2304: Cannot find name 'Promise'.
    Error:(50, 66) TS2304: Cannot find name 'Promise'.
    Error:(89, 67) TS2304: Cannot find name 'Promise'.
    Error:(94, 38) TS2304: Cannot find name 'Promise'.
    Error:(94, 50) TS2304: Cannot find name 'Promise'.
    C:\Users\armyTik\Desktop\angular2\node_modules\rxjs\Observable.d.ts
    Error:(46, 62) TS2304: Cannot find name 'Promise'.
    Error:(47, 42) TS2304: Cannot find name 'Iterator'.
    Error:(103, 74) TS2304: Cannot find name 'Promise'.
    Error:(103, 84) TS2304: Cannot find name 'Promise'.
    Error:(143, 66) TS2304: Cannot find name 'Promise'.
    Error:(158, 65) TS2304: Cannot find name 'Promise'.
    Error:(201, 66) TS2304: Cannot find name 'Promise'.
    Error:(206, 38) TS2304: Cannot find name 'Promise'.
    Error:(206, 50) TS2304: Cannot find name 'Promise'.
    C:\Users\armyTik\Desktop\angular2\node_modules\rxjs\observable\ForkJoinObservable.d.ts
    Error:(6, 50) TS2304: Cannot find name 'Promise'.
    Error:(7, 58) TS2304: Cannot find name 'Promise'.
    C:\Users\armyTik\Desktop\angular2\node_modules\rxjs\observable\FromObservable.d.ts
    Error:(7, 38) TS2304: Cannot find name 'Promise'.
    Error:(7, 51) TS2304: Cannot find name 'Iterator'.
    C:\Users\armyTik\Desktop\angular2\node_modules\rxjs\observable\PromiseObservable.d.ts
    Error:(9, 31) TS2304: Cannot find name 'Promise'.
    Error:(10, 26) TS2304: Cannot find name 'Promise'.

回答by Kris Hollenbeck

Angular 5 with Typescript ^2.0.0

带有打字稿 ^2.0.0 的 Angular 5

This should also work the same with earlier versions of Angular 2+.

这也应该与早期版本的 Angular 2+ 相同。

To get this to work with typescript 2.0.0, I did the following.

为了使其与 typescript 2.0.0 一起使用,我执行了以下操作。

npm install --save-dev @types/core-js

npm install --save-dev @types/core-js

tsconfig.json

配置文件

 "compilerOptions": {
    "declaration": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "mapRoot": "./",
    "module": "es6",
    "moduleResolution": "node",
    "noEmitOnError": true,
    "noImplicitAny": false,
    "outDir": "../dist/out-tsc",
    "sourceMap": true,
    "target": "es5",
    "typeRoots": [
      "../node_modules/@types"
    ],
    "types": [
      "core-js"
    ]
  }

More about @types with typescript 2.0.0.

更多关于 @types 和 typescript 2.0.0。

  1. https://blogs.msdn.microsoft.com/typescript/2016/06/15/the-future-of-declaration-files/
  2. https://www.npmjs.com/~types
  1. https://blogs.msdn.microsoft.com/typescript/2016/06/15/the-future-of-declaration-files/
  2. https://www.npmjs.com/~types

Install Example:

安装示例:

npm install --save-dev @types/core-js

Duplicate Identifier errors

重复标识符错误

This is most likely because duplicate ecmascript 6 typings are already being imported from somewhere else most likely an old es6-shim.

这很可能是因为重复的 ecmascript 6 类型已经从其他地方导入,很可能是旧的 es6-shim。

Double check typings.d.tsmake sure there are no references to es6. Remove any reference to es6from your typings directory if you have one.

仔细检查typings.d.ts确保没有对es6. es6如果你有的话,从你的打字目录中删除任何引用。

For Example:

例如:

This will conflict with types:['core-js']in typings.json.

这将与types:['core-js']typings.json冲突。

{
  "globalDependencies": {
    "core-js": "registry:dt/core-js#0.0.0+20160602141332" 
    // es6-shim will also conflict
  }
}

Including core-jsin the types array in tsconfig.jsonshould be the only place it is imported from.

包含core-js在类型数组中的tsconfig.json应该是它从中导入的唯一位置。

Angular CLI 1.0.0-beta.30

Angular CLI 1.0.0-beta.30

If you are using the Angular-CLI, remove the lib array in typings.json. This seems to conflict with declaring core-js in types.

如果您使用的是 Angular-CLI,请删除typings.json. 这似乎与在类型中声明 core-js 冲突。

"compilerOptions" : {
  ...
  // removed "lib": ["es6", dom"],
  ...
},
"types" : ["core-js"]

Webstorm/Intellij Users using the Angular CLI

使用 Angular CLI 的 Webstorm/Intellij 用户

Make sure the built in typescript compiler is disabled. This will conflict with the CLI. To compile your typescript with the CLI you can setup a ng serveconfiguration.

确保禁用内置的打字稿编译器。这将与 CLI 冲突。要使用 CLI 编译您的打字稿,您可以设置一个ng serve配置。

enter image description here

在此处输入图片说明

Tsconfig compilerOptions lib vs types

Tsconfig compilerOptions lib 与类型

If you prefer not to install core js type definitions there are some es6 libraries that come included with typescript. Those are used via the lib: []property in tsconfig.

如果您不想安装核心 js 类型定义,那么 typescript 中包含一些 es6 库。这些是通过lib: []tsconfig 中的属性使用的。

See here for example: https://www.typescriptlang.org/docs/handbook/compiler-options.html

例如,请参见此处:https: //www.typescriptlang.org/docs/handbook/compiler-options.html

Note: If --lib is not specified a default library is injected. The default library injected is: ? For --target ES5: DOM,ES5,ScriptHost ? For --target ES6: DOM,ES6,DOM.Iterable,ScriptHost

注意:如果未指定--lib,则会注入默认库。注入的默认库是:对于 --target ES5: DOM,ES5,ScriptHost ? 对于 --target ES6: DOM,ES6,DOM.Iterable,ScriptHost

tl;dr

tl;博士

Short answer either "lib": [ "es6", "dom" ]or "types": ["core-js"]can be used to resolve can't find Promise,Map, Set and Iterator. Using both however will cause duplicate identifier errors.

简答"lib": [ "es6", "dom" ]"types": ["core-js"]可用于解决can't find Promise,Map, Set and Iterator。但是,同时使用两者会导致重复标识符错误。

回答by Daniel C. Deng

I also have the same problem--"Promise not found"--when the code wants to create a Promise object.

我也有同样的问题——“找不到承诺”——当代码想要创建一个 Promise 对象时。

Tried some solution found on stackoverflow, including the one to take out System.config({ ... }) to form system.js and have it included in index.html.

尝试了在 stackoverflow 上找到的一些解决方案,包括取出 System.config({ ... }) 以形成 system.js 并将其包含在 index.html 中的解决方案。

Finally I solved the problem. The issue is that, in index.html, es6-shim.min.js is included. However, in tsconfig.json, the "target" property under "compilerOptions" has the value of "es5". After I changed it to "es6", error is gone.

最后我解决了这个问题。问题是,在 index.html 中,包含了 es6-shim.min.js。但是,在 tsconfig.json 中,“compilerOptions”下的“target”属性的值为“es5”。在我将其更改为“es6”后,错误消失了。

回答by Pankaj Parkar

Angular 2 Final

角 2 决赛

- es5 support(Works perfectly with TS 2.0.0 +)

- es5 支持(与 TS 2.0.0 + 完美配合)

Per update es6-shimisn't supported now, if you have both typings installed together es6-shim& core-jstogether. Remove es6-shimtyping by mentioning in tsconfig.json. You could now refer below core-jstyping for es5support inside main.ts

每次更新es6-shim现在不支持,如果安装在一起的两条分型es6-shimcore-js在一起。es6-shim通过在 tsconfig.json 中提及来删除输入。您现在可以参考下面的core-js打字以获得es5内部支持main.ts

///<reference path="./../typings/globals/core-js/index.d.ts"/>

tsconfig.json

配置文件

exclude: [
   "node_modules", //<-- this would be needed in case of VS2015
   "node_modules/@typings",
   "typings"
]

- es6 suppport

- es6 支持

You just need to set "target"property to es6, then all will error go away. And the transpiled code will be in es6format.

您只需要将"target"属性设置为es6,然后所有错误都会消失。转换后的代码将采用es6格式。

回答by Nick Acosta

Updated as of angular-2.0.0-rc.4

更新自 angular-2.0.0-rc.4

TLDR;

TLDR;

  1. Transpile to es6

    • error goes away (w/ some gotchas).
  2. Transpile to es5

    • install typings
    • install the es6 shim
    • make sure it compiles with your code.
    • error goes away.
  1. 转译为es6

    • 错误消失(带有一些陷阱)。
  2. 转译为es5

    • 安装打字机
    • 安装 es6 垫片
    • 确保它与您的代码一起编译。
    • 错误消失。

For the readers:

对于读者:

Option 1: Transpile to es6 or es2015

选项 1:转译到 es6 或 es2015

tsconfig.json:

tsconfig.json:

{
  "compilerOptions": {
    "target": "es6",
    "module": "system",
    "moduleResolution": "node",
     ...
  },
"exclude": [
    "node_modules",
    "jspm_packages"
  ]
}

Keep in mind uglifyjs does not support es6 at the moment. This could affect you making production bundles.

请记住,uglifyjs 目前不支持 es6。这可能会影响您制作生产包。

Option 2: Transpile to es5, install typings, and then install the es6-shim:

选项 2:Transpile 到 es5,安装typings,然后安装 es6-shim:

tsconfig.json:

tsconfig.json:

{
  "compilerOptions": {
    "target": "es5",
    "module": "system",
    "moduleResolution": "node",
     ...
  },
  "exclude": [
    "node_modules",
    "jspm_packages"
  ]
}

Install typings, then install es6-shim:

安装typings,然后安装es6-shim:

npm install typings --saveDev
typings install dt~es6-shim --global --save

If you go this route, you need to make sure that the typescript compiler can find the .d.ts file.

如果你走这条路,你需要确保打字稿编译器可以找到 .d.ts 文件。

You have two options:

您有两个选择:

a. Make sure your tsconfig.json is at the same level as the typings folder.

一种。确保您的 tsconfig.json 与typings 文件夹处于同一级别。

b. Include a reference in your main.ts file where your angular2 application is bootstrapped.

湾 在 angular2 应用程序引导的 main.ts 文件中包含一个引用。

Option A: Make sure your tsconfig.json is at the same level as the typings folder.

选项 A:确保您的 tsconfig.json 与typings 文件夹处于同一级别。

Note: DO NOT use the exclude flag to exclude typings folder.

注意:不要使用排除标志来排除打字文件夹。

project
|-- src
|-- node_modules
|-- package.json
|-- typings
|-- tsconfig.json

Option B: Reference in main file before bootstrap (Don't do this):

选项 B:在引导前在主文件中引用(不要这样做):

As shown in other answers, this file is no longer included by Angular

如其他答案所示,Angular 不再包含此文件

main.ts:

main.ts:

/// <reference path="../../typings/globals/es6-shim/index.d.ts" />

回答by Niels Steenbeek

When having Typescript >= 2 the "lib" option in tsconfig.json will do the job. No need for Typings. https://www.typescriptlang.org/docs/handbook/compiler-options.html

当 Typescript >= 2 时,tsconfig.json 中的“lib”选项将完成这项工作。不需要打字。https://www.typescriptlang.org/docs/handbook/compiler-options.html

{
    "compilerOptions": {
        "target": "es5",
        "lib": ["es2016", "dom"] //or es6 instead of es2016(es7)
    }
}

回答by All ?? Vаи?тy

This is what worked for me.

这对我有用。

check if there exists a typings.jsonfile,

检查是否存在typings.json文件,

It looks something like this,

{
  "globalDependencies": {
    "core-js": "registry:dt/core-js#0.0.0+20160317120654",
    "jasmine": "registry:dt/jasmine#2.2.0+20160505161446",
    "node": "registry:dt/node#6.0.0+20160613154055"
  }
}

它看起来像这样,

{
  "globalDependencies": {
    "core-js": "registry:dt/core-js#0.0.0+20160317120654",
    "jasmine": "registry:dt/jasmine#2.2.0+20160505161446",
    "node": "registry:dt/node#6.0.0+20160613154055"
  }
}

Install typings package globally.

全局安装打字包。

sudo npm install -g typings

after installing typings, run

安装Typings 后,运行

typings install

then restart the server.

然后重启服务器。

回答by Nandakumar Purohit

I had similar issue where it was not recognizing Promise.resolve()method. I changed "target"value from ES5 to ES6in tsconfig.json. That solved the problem.

我有类似的问题,它无法识别Promise.resolve()方法。我改变了“目标”值从ES5到ES6tsconfig.json。那解决了问题。

Hope this helps.

希望这可以帮助。

回答by James

Since Angular 2 went to RC 0, /angular2/typings/browser.d.ts is no longer part of the Angular 2 distribution. The file can be installed separately.

由于 Angular 2 进入 RC 0,/angular2/typings/browser.d.ts 不再是 Angular 2 发行版的一部分。该文件可以单独安装。

From here: https://github.com/angular/angular/issues/8513there are a few options. The one that worked for me was:

从这里:https: //github.com/angular/angular/issues/8513有几个选项。对我有用的是:

typings install es6-shim --ambient --save

// In your app.ts
/// <reference path="typings/browser.d.ts" />

回答by Simon Trewhella

If using Angular2 RC1 with typings v1.0+ use the command:

如果将 Angular2 RC1 与 Typings v1.0+ 一起使用,请使用以下命令:

typings install dt~core-js --save --global

to install the core-js definition and then reference your global index in your main.ts:

安装 core-js 定义,然后在 main.ts 中引用全局索引:

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

If using es6-shim or some other shim library, install typings for that instead

如果使用 es6-shim 或其他一些 shim 库,请为它安装类型

Refer to https://github.com/typings/typings/issues/517

参考https://github.com/typings/typings/issues/517

回答by Darkseal

I managed to fix this issue without having to add any triple-slash reference to the TS bootstrap file, change to ES6 (which brings a bunch of issues, just as @DatBoisaid) update VS2015's NodeJSand/or NPMbundled builds or install typingsglobally.

我设法解决了这个问题,而无需向 TS 引导文件添加任何三斜杠引用,更改为 ES6(这带来了一系列问题,正如@DatBoi所说)更新 VS2015NodeJS和/或NPM捆绑构建或typings全局安装。

Here's what I did in few steps:

这是我分几步完成的:

  • added typingsin the project's package.jsonfile.
  • added a scriptblock in the package.jsonfile to execute/update typingsafter each NPM action.
  • added a typings.jsonfile in the project's root folder containing a reference to core-js, which is one of the best shim/polyfill packages out there at the moment to fix ES5/ES6 issues.
  • 添加typings到项目package.json文件中。
  • 在每个 NPM 操作后scriptpackage.json文件中添加一个块以执行/更新typings
  • typings.json在项目的根文件夹中添加了一个文件core-js,其中包含对 的引用,这是目前修复 ES5/ES6 问题的最好的 shim/polyfill 包之一。

Here's how the package.jsonfile should look like (relevant lines only):

以下是package.json文件的外观(仅限相关行):

{
  "version": "1.0.0",
  "name": "YourProject",
  "private": true,
  "dependencies": {
    ...
    "typings": "^1.3.2",
    ...
  },
  "devDependencies": {
    ...
  },
  "scripts": {
      "postinstall": "typings install"
  }
}

And here's the typings.jsonfile:

这是typings.json文件:

{
  "globalDependencies": {
    "core-js": "registry:dt/core-js#0.0.0+20160602141332",
    "jasmine": "registry:dt/jasmine#2.2.0+20160621224255",
    "node": "registry:dt/node#6.0.0+20160621231320"
  }
}

(Jasmineand Nodeare not required, but I suggest to keep them in case you'll need to in the future).

Jasmine并且Node不是必需的,但我建议保留它们以备将来需要)。

This fix is working fine with Angular2 RC1 to RC4, which is what I needed, but I think it will also fix similar issues with other ES6-enabled library packages as well.

此修复程序适用于 Angular2 RC1 到 RC4,这是我所需要的,但我认为它也将修复其他支持 ES6 的库包的类似问题。

AFAIK, I think this is the cleanest possible way of fixing it without messing up the VS2015 default settings.

AFAIK,我认为这是在不弄乱 VS2015 默认设置的情况下修复它的最干净的方法。

For more info and a detailed analysis of the issue, I also suggest to read this poston my blog.

有关该问题的更多信息和详细分析,我还建议阅读我博客上的这篇文章。