Angular和Typescript：找不到名称

我将Angular（版本2）与TypeScript（版本1.6）一起使用，并且在编译代码时出现以下错误：

Error TS2304: Cannot find name 'Map'.
    node_modules/angular2/src/core/change_detection/parser/locals.d.ts(4,42): Error TS2304: Cannot find name 'Map'.
    node_modules/angular2/src/core/facade/collection.d.ts(1,25): Error TS2304: Cannot find name 'MapConstructor'.
    node_modules/angular2/src/core/facade/collection.d.ts(2,25): Error TS2304: Cannot find name 'SetConstructor'.
    node_modules/angular2/src/core/facade/collection.d.ts(4,27): Error TS2304: Cannot find name 'Map'.
    node_modules/angular2/src/core/facade/collection.d.ts(4,39): Error TS2304: Cannot find name 'Map'.
    node_modules/angular2/src/core/facade/collection.d.ts(7,9): Error TS2304: Cannot find name 'Map'.
    node_modules/angular2/src/core/facade/collection.d.ts(8,30): Error TS2304: Cannot find name 'Map'.
    node_modules/angular2/src/core/facade/collection.d.ts(11,43): Error TS2304: Cannot find name 'Map'.
    node_modules/angular2/src/core/facade/collection.d.ts(12,27): Error TS2304: Cannot find name 'Map'.
    node_modules/angular2/src/core/facade/collection.d.ts(14,23): Error TS2304: Cannot find name 'Map'.
    node_modules/angular2/src/core/facade/collection.d.ts(15,25): Error TS2304: Cannot find name 'Map'.
    node_modules/angular2/src/core/facade/collection.d.ts(94,41): Error TS2304: Cannot find name 'Set'.
    node_modules/angular2/src/core/facade/collection.d.ts(95,22): Error TS2304: Cannot find name 'Set'.
    node_modules/angular2/src/core/facade/collection.d.ts(96,25): Error TS2304: Cannot find name 'Set'.
    node_modules/angular2/src/core/facade/lang.d.ts(1,22): Error TS2304: Cannot find name 'BrowserNodeGlobal'.
    node_modules/angular2/src/core/facade/lang.d.ts(33,59): Error TS2304: Cannot find name 'Map'.
    node_modules/angular2/src/core/facade/promise.d.ts(1,10): Error TS2304: Cannot find name 'Promise'.
    node_modules/angular2/src/core/facade/promise.d.ts(3,14): Error TS2304: Cannot find name 'Promise'.
    node_modules/angular2/src/core/facade/promise.d.ts(8,32): Error TS2304: Cannot find name 'Promise'.
    node_modules/angular2/src/core/facade/promise.d.ts(9,38): Error TS2304: Cannot find name 'Promise'.
    node_modules/angular2/src/core/facade/promise.d.ts(10,35): Error TS2304: Cannot find name 'Promise'.
    node_modules/angular2/src/core/facade/promise.d.ts(10,93): Error TS2304: Cannot find name 'Promise'.
    node_modules/angular2/src/core/facade/promise.d.ts(11,34): Error TS2304: Cannot find name 'Promise'.
    node_modules/angular2/src/core/facade/promise.d.ts(12,32): Error TS2304: Cannot find name 'Promise'.
    node_modules/angular2/src/core/facade/promise.d.ts(12,149): Error TS2304: Cannot find name 'Promise'.
    node_modules/angular2/src/core/facade/promise.d.ts(13,43): Error TS2304: Cannot find name 'Promise'.
    node_modules/angular2/src/core/linker/element_injector.d.ts(72,32): Error TS2304: Cannot find name 'Map'.
    node_modules/angular2/src/core/linker/element_injector.d.ts(74,17): Error TS2304: Cannot find name 'Map'.
    node_modules/angular2/src/core/linker/element_injector.d.ts(78,184): Error TS2304: Cannot find name 'Map'.
    node_modules/angular2/src/core/linker/element_injector.d.ts(83,182): Error TS2304: Cannot find name 'Map'.
    node_modules/angular2/src/core/linker/element_injector.d.ts(107,37): Error TS2304: Cannot find name 'Map'.
    node_modules/angular2/src/core/linker/proto_view_factory.d.ts(27,146): Error TS2304: Cannot find name 'Map'.
    node_modules/angular2/src/core/linker/view.d.ts(52,144): Error TS2304: Cannot find name 'Map'.
    node_modules/angular2/src/core/linker/view.d.ts(76,79): Error TS2304: Cannot find name 'Map'.
    node_modules/angular2/src/core/linker/view.d.ts(77,73): Error TS2304: Cannot find name 'Map'.
    node_modules/angular2/src/core/linker/view.d.ts(94,31): Error TS2304: Cannot find name 'Map'.
    node_modules/angular2/src/core/linker/view.d.ts(97,18): Error TS2304: Cannot find name 'Map'.
    node_modules/angular2/src/core/linker/view.d.ts(100,24): Error TS2304: Cannot find name 'Map'.
    node_modules/angular2/src/core/linker/view.d.ts(103,142): Error TS2304: Cannot find name 'Map'.
    node_modules/angular2/src/core/linker/view.d.ts(104,160): Error TS2304: Cannot find name 'Map'.
    node_modules/angular2/src/core/render/api.d.ts(281,74): Error TS2304: Cannot find name 'Map'.
    node_modules/angular2/src/core/zone/ng_zone.d.ts(1,37): Error TS2304: Cannot find name 'Zone'.

这是代码：

import 'reflect-metadata';
import {bootstrap, Component, CORE_DIRECTIVES, FORM_DIRECTIVES} from 'angular2/core';
@Component({
  selector: 'my-app',
  template: '<input type="text" [(ng-model)]="title" /><h1>{{title}}</h1>',
  directives: [ CORE_DIRECTIVES ]
})
class AppComponent {
  title :string;

  constructor() {
    this.title = 'hello angular 2';
  }
}
bootstrap(AppComponent);

已知问题：https : //github.com/angular/angular/issues/4902

核心原因：.d.tsTypeScript隐式包含的文件随编译目标的不同而不同，因此，es5即使目标在运行时中确实存在（例如chrome），在目标定位时也需要有更多环境声明。更多关于lib.d.ts

2.0.0-beta.6（2016-02-11）的变更日志中提到了一个变通办法（在重大更改下列出）：

如果使用--target = es5，则需要在应用程序中的某处添加一行（例如，在您称为bootstrap的.ts文件顶部）：

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

（请注意，如果文件与node_modules不在同一目录中，则需要在该路径的开头添加一个或多个../。）

确保您具有正确的参考路径，我需要在开始时添加../才能使此工作正常进行。

定位ES5时未定义诸如承诺之类的ES6功能。还有其他库，但是core-js是Angular团队使用的javascript库。它包含用于ES6的polyfill。

自问这个问题以来，Angular 2发生了很大变化。类型声明在Typescript 2.0 中更容易使用。

npm install -g typescript

对于Angular 2中的ES6功能，您不需要键入。只需使用Typescript 2.0或更高版本，并在npm中安装@ types / core-js即可：

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

然后，将TypeRoots和Types属性添加到tsconfig.json中：

{
  "compilerOptions": {
    "target": "es5",
    "module": "es6",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false,
    "typeRoots": [
      "../node_modules/@types"
    ],
    "types" : [
      "core-js"
    ]
  },
  "exclude": [
    "node_modules"
  ]
}

如其他答案所述，这比使用“打字”要容易得多。有关更多信息，请参见Microsoft的博客文章：打字稿：声明文件的未来

对于那些angular.io刚刚讲完Angular2教程的人，这里是mvdluit的答案的扩展，确切地将代码放置在哪里：

您main.ts应该看起来像这样：

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

import {bootstrap} from 'angular2/platform/browser'
import {AppComponent} from './app.component'
// Add all operators to Observable
import 'rxjs/Rx'

bootstrap(AppComponent);

请注意，您留在///正斜杠中，请勿删除它们。

参考：https : //github.com/ericmdantas/angular2-typescript-todo/blob/master/index.ts#L1

我可以使用以下命令解决此问题

typings install es6-promise es6-collections --ambient

请注意，您需要typings使上述命令生效，如果没有，请运行以下命令进行安装

npm install -g typings

更新

键入更新不会读--ambient，--global对于某些人来说，您需要安装上述库的定义，只需使用以下命令

typings install dt~es6-promise dt~es6-collections --global --save

感谢@bgerth指出这一点。

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

对于Angular 2.0.0-rc.0添加node_modules/angular2/typings/browser.d.ts将不起作用。首先向您的解决方案中添加types.json文件，内容如下：

{
    "ambientDependencies": {
        "es6-shim": "github:DefinitelyTyped/DefinitelyTyped/es6-shim/es6-shim.d.ts#7de6c3dd94feaeb21f20054b9f30d5dabc5efabd"
    }
}

然后更新package.json文件以包括以下内容postinstall：

"scripts": {
    "postinstall": "typings install"
},

现在运行 npm install

同样，现在您也应该忽略typings文件中的tsconfig.json文件夹：

 "exclude": [
        "node_modules",
        "typings/main",
        "typings/main.d.ts"
    ]

更新资料

现在AngularJS 2.0正在使用core-js而不是es6-shim。请关注其快速入门的types.json文件，以获取更多信息。

您可以将代码添加到.ts文件的开头。

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

我在Angular 2 rc1上得到了这个。原来有些名称是通过键入v1与旧的0.x进行了更改。该browser.d.ts文件成为index.d.ts。

运行后，typings install找到您的启动文件（您在其中进行引导）并添加：

/// <reference path="../typings/index.d.ts" /> （或没有 ../如果您的启动文件与打字文件夹位于同一文件夹中，则不包含）

添加index.d.ts到文件列表中tsconfig.json由于某些原因，无法。

另外，es6-shim不需要该包装。

我可以通过安装typings模块来解决此问题。

npm install -g typings
typings install

（使用ng 2.0.0-rc.1）

我遇到了同样的问题，并使用中的lib选项解决了它tsconfig.json。正如basarat在他的回答中所说，.d.tsTypeScript根据编译target选项隐式包含一个文件，但是可以通过以下方式更改此行为：lib选项。

您可以指定要包含的其他定义文件，而无需更改目标JS版本。例如，这是我当前compilerOptions对Typescript@2.1的一部分，它增加了对es2015功能的支持，而无需安装其他任何东西：

"compilerOptions": {
    "experimentalDecorators": true,
    "lib": ["es5", "dom", "es6", "dom.iterable", "scripthost"],
    "module": "commonjs",
    "moduleResolution": "node",
    "noLib": false,
    "target": "es5",
    "types": ["node"]
}

有关可用选项的完整列表，请查看官方文档。

还要注意，我在代码中添加"types": ["node"]并安装npm install @types/node了支持功能require('some-module')。

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

并将正确的路径添加到index.d.ts

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

在@ angular-2.0.0-rc3上尝试

如果npm install -g typings typings install仍然没有帮助，删除node_modules和分型文件夹执行此命令前。

这就是每个人都在尝试做不同的事情的想法。我相信这些系统离最终版本还差得很远。

就我而言，我从rc.0更新为rc.5，出现了此错误。

我的解决办法是更改tsconfig.json。

{
    "compilerOptions": {
        "target": "es6", <-- It was es5
        "module": "system",
        "moduleResolution": "node",
        "sourceMap": true,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "removeComments": false,
        "noImplicitAny": false,
        "outDir": "../wwwroot/app"
    },
    "compileOnSave": true,
    "exclude": [
        "../node_modules",
        "../typings/main"
    ]
}

在应用程序的主文件夹中添加typeing.d.ts，然后在那儿声明您想每次使用的变量

declare var System: any;
declare var require: any;

在type.d.ts中声明之后，应用程序中不会出现require的错误。

我是Angular的新手，但对我来说，只需导入Input即可找到解决方案。无法相信这一点，在另一块木板上找到了它。如果您遇到相同的问题，这是一个简单的解决方法，但是如果您的问题更复杂，则请阅读上面的内容。

穆克什：

您必须在子组件的顶部导入这样的输入

import { Directive, Component, OnInit, Input } from '@angular/core';

我发现这个非常有用的文档在Angular 2的网站上。最终，它使我可以正常工作，而此处的其他答案（用于安装类型）使我失败，并出现各种错误。（但帮助我指引了正确的方向。）

它没有包含es6-promise和es6-collection，而是包含core-js，这对我有用了……与Angular2的核心ts定义没有冲突。此外，该文档还介绍了如何设置所有这些功能以使其在安装NPM时自动发生，以及如何修改您的typings.json文件。

Angular 2 RC1将node_modules/angular2目录重命名为node_modules/angular。

如果您使用gulpfile将文件复制到输出目录，则可能仍然 node_modules/angular坐在那里，编译器可能会拾取该。

因此，（仔细地）清除node_modulesBeta版本中的内容，并删除所有旧输入并重新运行typings install。

好的，@ VahidN，我发现我需要

    "exclude": [
        "node_modules",
        "typings/main",
        "typings/main.d.ts"
    ]

我tsconfig也一样，从停止错误es6-shim本身

请将以下语句导入到JS文件中。

import 'rxjs/add/operator/map';

可接受的答案无法提供可行的解决方案，大多数其他建议都提出了“三斜杠”解决方法，该解决方法不再可行，因为browser.d.tsAngular2最新RC已将其删除，因此不再可用。

我强烈建议按照typings此处几个解决方案的建议安装该模块，但是不必手动或全局安装它-有一种有效的方法可以仅在您的项目中以及在VS2015界面中执行此操作。这是您需要做的：

• 添加typings在项目的package.json文件中。
• 在每个NPM操作之后script，在package.json文件中添加一个块以执行/更新typings。
• typings.json在项目的根文件夹中添加一个包含对它的引用的文件core-js（总的来说要比es6-shimatm好）。

而已。

您也可以查看此其他SO线程，和/或阅读我的博客上的这篇文章以获取更多详细信息。

将我的dev分支合并到当前分支后，出现了此错误。我花了一些时间解决这个问题。正如您在下图中看到的，代码完全没有问题。

所以对我来说唯一的解决方法是重启VSCode

现在，您必须手动导入它们。

import 'rxjs/add/operator/retry';
import 'rxjs/add/operator/timeout';
import 'rxjs/add/operator/delay';
import 'rxjs/add/operator/map';




this.http.post(url, JSON.stringify(json), {headers: headers, timeout: 1000})

         .retry(2)

         .timeout(10000, new Error('Time out.'))

         .delay(10)

         .map((res) => res.json())
        .subscribe(
          (data) => resolve(data.json()),
          (err) => reject(err)
        );

更新tsconfig.json，更改

"target": "es5"

至

"target": "es6"