Angular：找不到 Promise、Map、Set 和 Iterator

Question

安装 Angular 后，Typescript 编译器不断收到一些关于找不到 Promise、Map、Set 和 Iterator 的错误。

直到现在我都忽略了它们，但现在我需要 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

错误：

................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'.

Answer 1

我设法解决了这个问题，而无需在 TS 引导文件中添加任何三斜杠引用，更改为 ES6（这会带来一堆问题，正如 @DatBoi 所说）更新 VS2015 的 NodeJS 和/或NPM 捆绑构建或全局安装 typings。

这是我通过几个步骤完成的：

• 在项目的package.json 文件中添加了typings。
• 在package.json 文件中添加了一个script 块以在每个 NPM 操作后执行/更新typings。
• 在项目的根文件夹中添加了一个 typings.json 文件，其中包含对 core-js 的引用，这是目前修复 ES5/ES6 问题的最佳 shim/polyfill 包之一。

package.json 文件的外观如下（仅相关行）：

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

这是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"
  }
}

（Jasmine 和 Node 不是必需的，但我建议保留它们以备日后需要使用）。

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

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

更多信息和问题的详细分析，我也建议在我的博客上read this post。

Answer 2

我注意到从 Angular 5 升级到 Angular 6 后出现了这些问题。我可以通过在 VS2017 中执行以下操作来解决此问题：

• 确保为我的特定 TypeScript 版本 2.9 安装了 TypeScript SDK（通过 Visual Studio 安装程序）
• 确保将 Module System 项目属性设置为与我的 tsconfig.json: ES2015 中的匹配。如果 tsconfig 文件位于项目的根目录中，这通常会自动同步。但是，由于我使用的是 VS Angular 模板，它会将这些文件放在“ClientApp”子文件夹中，并且未设置 Module System 项目属性。

tsconfig.json：

{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "lib": [
      "es2017",
      "dom"
    ],
    "module": "es2015",
    "baseUrl": "./"
  }
}

Answer 3

如果您来到这里是因为您在 Visual Studio 2017 中看到这些错误，那么如果您编译成功，那么您会遇到与上述不同的问题。这是因为语言服务不会选择您的 tsconfig.json。

https://developercommunity.visualstudio.com/content/problem/208941/vs-156-ignores-tsconfigjson-and-typescriptcompileb.html

您必须将 tsconfig.json 的 Build Action 设置为“Content”（右键单击 -> 属性），然后 VS 会选择它。

Answer 4

Angular 5 和 Typescript ^2.0.0

这也应该适用于早期版本的 Angular 2+。

为了让它与 typescript 2.0.0 一起使用，我做了以下操作。

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"
    ]
  }

更多关于带有 typescript 2.0.0 的@types。

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

安装示例：

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

重复标识符错误

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

仔细检查typings.d.ts，确保没有引用es6。如果有，请从您的类型目录中删除任何对 es6 的引用。

例如：

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

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

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

Angular CLI 1.0.0-beta.30

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

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

使用 Angular CLI 的 Webstorm/Intellij 用户

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

Tsconfig compilerOptions lib vs types

如果您不想安装核心 js 类型定义，可以使用 typescript 附带的一些 es6 库。这些通过 tsconfig 中的 lib: [] 属性使用。

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

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

tl;dr

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

Answer 5

Angular 2 最终版

- es5 支持（与 TS 2.0.0 + 完美配合）

现在不支持每次更新 es6-shim，如果您同时安装了两个类型 es6-shim 和 core-js 一起。通过在 tsconfig.json 中提及来删除 es6-shim 输入。您现在可以参考下面的core-js 在main.ts 内输入es5 支持

///<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 支持

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

Answer 6

当 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)
    }
}

Answer 7

我正在使用 angular2 教程（英雄）进行培训。
安装 @types/core-js 在这些答案中评论后，我收到“重复标识符”错误。
在我的情况下，它被解决为删除 tsconfig.json 中的 lib 行。

//“lib”：[“es2015”，“dom”]

Answer 8

另一个很好的解决方案。 您需要在项目的根目录中创建一个包含内容的文件 typings.json：

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

然后安装全局或本地类型包，如果没有安装（我是全局安装）：

sudo npm install --global typings

在项目根目录运行命令：

typings install

问题解决后。不需要将 tsconfig 目标更改为 es6 或 es7。之后您的 Web 应用程序不支持某些旧版本的浏览器。

Answer 9

我遇到了同样的问题，并且能够在 github https://github.com/angular/angular-cli/issues/1901 中找到它，这表明这是 typescript@2.0.2 的问题。

在全局和本地将 typescript 降级为 2.0.0 帮助我解决了这个问题。

全球：

npm uninstall typescript -g
npm cache clean
npm install typescript@2.0.0 -g

本地：进入您由 ng new 创建的项目文件夹

npm uninstall typescript
npm cache clean
npm install typescript@2.0.0

我还将 package.json 中的 typescript 版本从 ^2.0.0 更改为 2.0.0，但是直到我降级本地 typescript 安装后它才起作用。

Answer 10

我遇到了类似的问题，它无法识别 Promise.resolve() 方法。我在 tsconfig.json 中将 "target" 值从 ES5 更改为 ES6。这样就解决了问题。

希望这会有所帮助。

Answer 11

自 angular-2.0.0-rc.4 起更新

TLDR;

1. 转译为 es6

   • 错误消失（带有一些陷阱）。

2. 转译为 es5

   • 安装类型
   • 安装 es6 垫片
   • 确保它与您的代码一起编译。
   • 错误消失了。

对于读者：

选项 1：转译为 es6 或 es2015

tsconfig.json：

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

记住uglifyjs does not support es6 at the moment。这可能会影响您制作生产包。

选项 2：转译到 es5，安装类型，然后安装 es6-shim：

tsconfig.json：

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

安装类型，然后安装 es6-shim：

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

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

你有两个选择：

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

b.在您的 main.ts 文件中包含一个引用，您的 angular2 应用程序在其中被引导。

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

注意：不要使用排除标志来排除类型文件夹。

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

选项 B：在引导之前在主文件中引用（不要这样做）：

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

main.ts:

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

Answer 12

另一个可能的解决方案是重新安装类型：
这适用于"angular2": "2.0.0-beta.15"

1. npm clean cache
2. npm install
3. npm install -g typings
4. 从项目中删除typings 目录（安装类型模块的目录）
5. typings install
6. npm run

Answer 13

我的文件结构如下：

project
 |--node-modules
 |   |--angular2
 |   |   |--typings
 |   |   |   |--browser.d.ts
 |--src
 |--app.ts

将以下内容粘贴到您的 app.ts 的顶部，您的问题就解决了

/// <reference path=">../../../node_modules/angular2/typings/browser.d.ts" />

Answer 14

这对我有用。

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

看起来像这样，

{
  "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"
  }
}

全局安装类型包。

sudo npm install -g typings

安装typings后，运行

typings install

然后重启服务器。

Answer 15

在我的类中创建一个 Promise 对象时，我遇到了同样的问题。 通过将目标名称从“es6”更改为“es5”解决了我的问题。

Answer 16

如果使用带有类型 v1.0+ 的 Angular2 RC1，请使用以下命令：

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

安装 core-js 定义，然后在 main.ts 中引用您的全局索引：

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

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

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

Answer 17

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

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

typings install es6-shim --ambient --save

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

Answer 18

我发现 boot.ts 中的引用不是正确的路径。将该路径更新为 /// <reference path=">../../../node_modules/angular2/typings/browser.d.ts" /> 解决了 Promise 错误。

Answer 19

我也有同样的问题——“Promise not found”——当代码想要创建一个 Promise 对象时。

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

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