Angular和Typescript：找不到名字


Angular and Typescript: Can't find names

我将Angular(版本2)与TypeScript(版本1.6)结合使用，当我编译代码时，会得到以下错误：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
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'.

这是代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import 'reflect-metadata';
import {bootstrap, Component, CORE_DIRECTIVES, FORM_DIRECTIVES} from 'angular2/core';
@Component({
  selector: 'my-app',
  template: '<input type="text" [(ng-model)]="title" />{{title}}',
  directives: [ CORE_DIRECTIVES ]
})
class AppComponent {
  title :string;

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

号

相关讨论

在2.0.0-beta.6(2016-02-11)的变更日志中提到了一项工作(列在"中断变更"下)：

If you use --target=es5, you will need to add a line somewhere in your application (for example, at the top of the .ts file where you call bootstrap):

号

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

(Note that if your file is not in the same directory as node_modules, you'll need to add one or more ../ to the start of that path.)

号

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

相关讨论

ES6功能，比如承诺，在针对ES5时没有定义。还有其他库，但是核心JS是Angular团队使用的JavaScript库。它包含ES6的多填充物。

自从这个问题被问起，角2已经改变了很多。类型声明在typescript 2.0中更容易使用。

1
npm install -g typescript

。

对于角2中的ES6功能，您不需要打字。只需使用typescript 2.0或更高版本并安装@types/core js和NPM:

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

号

然后，将typeroots和types属性添加到tsconfig.json中：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
{
 "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的博客文章：typescript:声明文件的未来

相关讨论

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

核心原因：typescript隐式包含的.d.ts文件随编译目标的不同而不同，因此在针对es5时，即使在运行时(例如chrome)中确实存在一些内容，也需要有更多的环境声明。更多关于lib.d.ts

相关讨论

对于那些遵循angular.io上的Angular2教程的人来说，为了明确起见，这里是mvdluit关于将代码精确放置在哪里的答案的扩展：

您的main.ts应该如下所示：

1
2
3
4
5
6
7
8
/// <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

相关讨论

我能用下面的命令解决这个问题

1
typings install es6-promise es6-collections --ambient

请注意，您需要typings才能使上述命令工作，如果您没有该命令，请运行以下命令来安装它。

1
npm install -g typings

。

更新

typings update没有读取--ambient，它变成了--global，对于一些需要安装上述库定义的人，只需使用以下命令

1
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网站

1
2
3
4
5
6
{
   "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是行不通的。首先将typings.json文件添加到解决方案中，内容如下：

1
2
3
4
5
{
   "ambientDependencies": {
       "es6-shim":"github:DefinitelyTyped/DefinitelyTyped/es6-shim/es6-shim.d.ts#7de6c3dd94feaeb21f20054b9f30d5dabc5efabd"
    }
}

然后更新package.json文件以包含该postinstall文件：

1
2
3
"scripts": {
   "postinstall":"typings install"
},

。

现在运行npm install

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

1
2
3
4
5
"exclude": [
       "node_modules",
       "typings/main",
       "typings/main.d.ts"
    ]

更新

现在AngularJS2.0使用的是core-js，而不是es6-shim。有关更多信息，请参阅其quick start typings.json文件。

相关讨论

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

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

号

相关讨论

我在角2 RC1上得到这个。原来有些名字是用v1和旧的0.x来改变的。browser.d.ts文件变成了index.d.ts。

运行typings install后，找到启动文件(在其中引导)并添加：

/// (如果启动文件与typings文件夹在同一文件夹中，则不包括../)

将index.d.ts添加到tsconfig.json中的文件列表中由于某种原因无法工作。

此外，不需要es6-shim包。

我也遇到了同样的问题，我用tsconfig.json中的lib选项解决了这个问题。正如Basarat在回答中所说，根据compile target选项，typescript隐式地包含了一个.d.ts文件，但这种行为可以通过lib选项进行更改。

可以指定要包含的其他定义文件，而不更改目标JS版本。例如，这是我当前的compilerOptionsfor [email protected]的一部分，它添加了对es2015功能的支持，而不安装任何其他功能：

1
2
3
4
5
6
7
8
9
"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模块来解决这个问题。

1
2
npm install -g typings
typings install

。

(使用NG 2.0.0-RC.1)

相关讨论

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

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

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

号

尝试于@angular-2.0.0-rc3

相关讨论

如果npm install -g typings typings install仍然不起作用，请在执行此命令之前删除node撘u modules和typings文件夹。

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

在我的例子中，我从rc.0更新到rc.5，出现了这个错误。

我修复的是更改tsconfig.json。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
{
   "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"
    ]
}
相关讨论

在应用程序的主文件夹中添加typing.d.ts，然后在那里声明每次要使用的变量

1
2
declare var System: any;
declare var require: any;

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

我是角的新手，但对我来说，解决方案是通过简单地导入输入找到的。这一个不值得称赞，在另一个板上找到了。如果你有同样的问题，这是一个简单的解决方法，但是如果你的问题更复杂，我会阅读上面的内容。

穆克什：

you have to import input like this at top of child component

号

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

我在Angular2的网站上找到了这个非常有用的医生。它最终让我的工作正常，而这里的其他答案，安装打字，失败了我与各种错误。(但帮助我找到了正确的方向。)

它不包括ES6 Promise和ES6系列，而是包含了核心JS，这对我有好处……与Angular2的核心TS定义没有冲突。另外，该文档还解释了如何在安装NPM时自动设置所有这些，以及如何修改typings.json文件。

接受的答案并不能提供一个可行的解决方案，而且大多数其他答案都表明"三重斜杠"的解决方案已经不可行了，因为browser.d.ts已被Angular2最新的RC移除，因此不再可用。

我强烈建议按照这里的一些解决方案的建议安装typings模块，但不必手动或全局安装—只有在VS2015接口中，才有一种有效的方法可以为您的项目安装该模块。你需要做的是：

  • 在项目的package.json文件中添加typings。
  • 在package.json文件中添加一个script块，在每次NPM操作后执行/更新typings。
  • 在项目的根文件夹中添加一个typings.json文件，其中包含对core-js的引用(总体上优于es6-shimatm)。

就这样。

你也可以看看这另一个SO线程和/或阅读我的博客上的这篇文章，了解更多的细节。

Angular2RC1将node_modules/angular2目录重命名为node_modules/angular。

如果您使用一个gulpfile将文件复制到一个输出目录中，那么您可能仍然有node_modules/angular在其中，它可能会被编译器捕获并把自己搞糊涂。

所以(小心地)删除你在node_modules中的beta版本，同时删除任何旧的排版，然后重新运行typings install。

相关讨论

在JS文件中导入下面的语句。

1
import 'rxjs/add/operator/map';

。

相关讨论

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

1
2
3
4
5
   "exclude": [
       "node_modules",
       "typings/main",
       "typings/main.d.ts"
    ]

。

在我的tsconfig中，停止es6-shim本身的错误。

在将dev分支合并到当前分支之后，我得到了这个错误。我花了些时间来解决这个问题。如下图所示，代码完全没有问题。

enter image description here。

所以对我来说唯一有效的解决方法就是重新启动vscode

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
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，更改

1
"target":"es5"

。

到

1
"target":"es6"

。

相关讨论