Angular和Typescript:找不到名字

Question

我正在使用带有TypeScript(版本1.6)的Angular(版本2),当我编译代码时,我得到以下错误:

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

Answer 1

在2.0.0-beta.6(2016-02-11)的变更日志中提到了一个变通方法(在重大变化下列出):

如果使用--target = es5,则需要在应用程序的某处添加一行(例如,在您调用bootstrap的.ts文件的顶部):

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

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

确保你有正确的参考路径,我需要添加../到开始使这个工作.

Answer 2

在定位ES5时,未定义承诺等ES6功能.还有其他库,但core-js是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

然后,将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"
  ]
}

这比使用Typings容易得多,如其他答案中所述.有关详细信息,请参阅Microsoft的博客文章:Typescript:声明文件的未来

Answer 3

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

核心原因:.d.tsTypeScript隐式包含的文件因编译目标而异,因此es5即使事件实际存在于运行时(例如chrome),也需要在定位时具有更多环境声明.更多关于lib.d.ts

Answer 4

对于那些遵循Angular2教程的人来说angular.io,这是一个扩展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);

请注意,您保留///正斜杠,不要删除它们.

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

Answer 5

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

typings install es6-promise es6-collections --ambient

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

npm install -g typings

UPDATE

typings update不读--ambient它也成了--global一些人你需要安装上面的库的定义,只需使用以下命令

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

感谢@bgerth指出这一点.

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

对于Angular 2.0.0-rc.0添加node_modules/angular2/typings/browser.d.ts将无法工作.首先将typings.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.按照其快速入门typings.json文件获取更多信息.

Answer 8

您可以在.ts文件的开头添加代码.

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

Answer 9

我在Angular 2 rc1上得到了这个.结果显示一些名称随着输入v1与旧的0.x而改变.该browser.d.ts文件成了index.d.ts.

运行后typings install找到你的启动文件(你引导的地方)并添加:

/// <reference path="../typings/index.d.ts" />(或者../如果您的启动文件与typings文件夹位于同一文件夹中)

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

此外,es6-shim不需要包裹.

Answer 10

我能够通过安装typings模块来解决这个问题.

npm install -g typings
typings install

(使用ng 2.0.0-rc.1)

Answer 11

我有同样的问题,我使用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')我的代码.

Answer 12

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

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

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

在@ angular-2.0.0-rc3上尝试