Angular 2打字稿找不到名字

我正在使用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

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

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

Answer 2

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

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

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

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

确保你有正确的参考path，我需要添加../到开始得到这个工作。

Answer 3

定位ES5时，没有定义类似promise的ES6function。 还有其他的库，但是core-js是Angular团队使用的JavaScript库。 它包含ES6的polyfills。

自从这个问题被问到，Angular 2已经发生了很大的变化。 TypeScript 2.0中的types声明更容易使用。

 npm install -g typescript 

对于Angular 2中的ES6function，您不需要types。 只需使用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" ] } 

这比使用types更容易，正如其他答案中所解释的那样。 有关更多信息，请参阅Microsoft的博客文章： Typescript：声明文件的未来

Answer 4

我可以用下面的命令来解决这个问题

 typings install es6-promise es6-collections --ambient 

请注意，如果您没有运行以下命令来安装上述命令，则需要使用types来执行上述命令

 npm install -g typings 

UPDATE

types更新不会读 – --ambient变得 – --global也有一些人需要安装上述库的定义，只需使用以下命令

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

感谢@ bgerth指出这一点。

Answer 5

对于那些遵循angular.io上的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 6

当Typescript> = 2时，tsconfig.json中的“lib”选项将完成这项工作。 没有需要的types。 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文件到您的解决scheme，与此内容：

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

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

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

现在运行npm install

现在你也应该忽略你的tsconfig.json文件中的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上得到了这个。 结果发现一些名字改变了typings v1与旧的0.x. browser.d.ts文件变成了index.d.ts 。

在运行typestypings installfind您的启动文件（自举），并添加：

（或者如果启动文件与typings文件夹位于同一文件夹中，则不需要../ ）

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

另外， es6-shim包不需要。

Answer 10

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

 npm install -g typings typings install 

（使用ng 2.0.0-rc.1）

Answer 11

我遇到了同样的问题，我使用tsconfig.json的lib选项解决了这个问题。 正如Basarat在他的回答中所说的，一个.d.ts文件被TypeScript隐式地包含在编译target选项中，但是这个行为可以通过lib选项来改变。

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

 "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 

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

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

在@ angular-2.0.0-rc3上试过

Answer 13

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

Answer 14

这就是为什么每个人都在试图做一些不同的事情。 我相信这些系统还远没有最终的版本。

就我而言，我从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" ] } 

Answer 15

我在Angular 2的网站上发现了这个非常有用的文档 。 它终于让我的东西正常工作，而另一个答案在这里，安装types，失败了我的各种错误。 （但帮助我走向正确的方向。）

它不包括es6-promise和es6-集合，它包含了core-js，它为我做了诀窍…与Angular2的核心ts定义没有冲突。 另外文档解释了如何设置所有这些在安装NPM时自动发生，以及如何修改typings.json文件。

Answer 16

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

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

在typing.d.ts中声明之后，require的错误将不会进入应用程序。

Answer 17

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

如果你正在使用gulpfile将文件复制到一个输出目录，那么你可能仍然会有node_modules/angular坐在那里，编译器可能会把它拾起来，而把它node_modules/angular糊涂了。

所以（仔细地）清除你在node_modules中的beta版本，并删除旧的types和重新运行typestypings install 。

Answer 18

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

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

在我的tsconfig ，也要阻止es6-shim本身的错误

Answer 19

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

 import 'rxjs/add/operator/map'; 

Answer 20

接受的答案没有提供可行的解决scheme，其他大多数人都提出了不再可行的“三重斜杠”解决方法，因为browser.d.ts已经被Angular2最新的RC删除了，因此不是可用了。

我强烈build议按照一些解决scheme的build议安装typings模块，但不需要手动或全局打印 – 只有在VS2015界面中才能为您的项目做到这一点。 这是你需要做的：

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

而已。

你也可以看看这个其他SO线程和/或阅读这篇文章的其他细节。

Answer 21

我是新来Angular，但对我来说，解决scheme是通过简单地导入input。 不能把这个信用，发现在另一个董事会。 这是一个简单的修复，如果你有同样的问题，但如果你的问题更复杂，我会读上面的东西。

穆克什 ：

你必须像这样在子组件的顶部导入input

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

Answer 22

更新tsconfig.json ，更改

 "target": "es5" 

至

 "target": "es6"