Angular 角度和字体：Can'；找不到名称-错误：找不到名称

我将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);

导入“反映元数据”；
从'angular2/CORE'导入{bootstrap，Component，CORE_指令，FORM_指令}；
@组成部分({
选择器：“我的应用程序”，
模板：“{{title}}”，
指令：[核心指令]
})
类AppComponent{
标题：字符串；
构造函数（）{
this.title='hello angular 2'；
}
}
bootstrap（AppComponent）；

已知问题：

---

核心原因：TypeScript隐式包含的

.d.ts

文件随编译目标的不同而不同，因此在定位

es5

时需要有更多的环境声明，即使运行时中确实存在一些东西（例如chrome）。更多关于

的信息在变更日志中提到了一个解决方法（在“中断变更”下列出）：

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

///

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

---

确保您有正确的参考路径，我需要在开始时添加。/，以使其正常工作。

对于那些遵循Angular2教程（关于

angular.io

）的人，为了明确起见，这里是mvdluit关于代码确切放置位置的答案的扩展：

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);

您的

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);

//
从“angular2/platform/browser”导入{bootstrap}
从“./app.component”导入{AppComponent}
//将所有运算符添加到Observable
导入“rxjs/Rx”
bootstrap（AppComponent）；

请注意，您在

//

前斜杠中保留斜杠，但不要删除它们

---

参考：

对于

Angular 2.0.0-rc.0

添加

节点模块/angular2/typings/browser.d.ts

将不起作用。首先将以下内容添加到您的解决方案中：

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

然后更新

package.json

文件以包含此

postinstall

：

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

现在运行

npm安装

现在您还应该忽略

tsconfig.json

文件中的

typings

文件夹：

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

更新

---

现在AngularJS 2.0正在使用

核心js

而不是

es6垫片

。请关注其快速入门了解更多信息。

打得好，@VahidN，我发现我需要

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

---

在我的

tsconfig

中，为了停止

es6垫片本身的错误，我可以通过安装
打字模块来解决此问题

npm install -g typings
typings install

（使用NG2.0.0-rc.1）
我可以通过以下命令解决这个问题

typings install es6-promise es6-collections --ambient

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

请注意，要使上述命令正常工作，您需要
键入
，如果您不让它运行以下命令来安装它

npm install -g typings

更新

打字更新不读取
--ambient
它变成了
--global
。对于某些人，您需要安装上述库的定义，只需使用以下命令

typings install es6-promise es6-collections --ambient

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

感谢@bgerth指出这一点。
我是在Angular 2 rc1上得到这个的。结果表明，一些名称因键入v1而改变，而不是旧的0.x。
browser.d.ts
文件变成了
index.d.ts

运行
typings安装后
找到启动文件（引导文件）并添加：

//
（如果启动文件与打字文件夹位于同一文件夹中，则不带
。/
）

由于某种原因，将
index.d.ts
添加到
tsconfig.json
中的文件列表中不起作用

此外，不需要es6垫片包。
Angular 2 RC1将
node\u modules/angular2
目录重命名为
node\u modules/angular2

如果您使用gulpfile将文件复制到输出目录，那么可能仍然有
节点\ u模块/angular
位于其中，这可能会被编译器拾取并将其自身弄糊涂

因此（小心地）清除测试版中的
node_模块
，同时删除所有旧的打字并重新运行
typings安装
ES6功能，如针对ES5的承诺没有定义。还有其他库，但CoreJS是Angular团队使用的javascript库。它包含ES6的多填充

自从提出这个问题以来，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

然后，将typeroot和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的博客帖子：
您可以在.ts文件开头添加代码

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

//
我在Angular 2的网站上找到了。它最终让我的工作正常，而这里的其他答案，安装打字，失败了我与各种错误。（但帮助我走向正确的方向。）

它没有包含es6 promise和es6 collections，而是包含了core js，这为我带来了好处。。。与Angular2的核心ts定义没有冲突。此外，本文还解释了如何在安装NPM时自动设置所有这些，以及如何修改typings.json文件

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

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

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

///

在@angular-2.0.0-rc3上试用过，公认的答案并没有提供可行的解决方案，其他大多数建议采用“三重斜杠”解决方案，该解决方案不再可行，因为Angular2最新的RC删除了
browser.d.ts
，因此不再可用

伊斯特罗
declare var System: any;
declare var require: any;

"target": "es5"

"target": "es6"

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

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

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

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)
        );

import { IProduct } from './product';

export class ProductListComponent {
    pageTitle: string = 'product list!';
    imageWidth: number = 50;
    imageMargin: number = 2;
    showImage: boolean = false;
    listFilter: string = 'cart';
    products: IProduct[] = ... //cannot find name error