Angular和Typescript：无法找到名字

时间：2015-10-25 16:58:48

标签： angular typescript

我正在使用带有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);

25 个答案:

答案 0 :(得分：103)

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

  

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

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

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

确保您拥有正确的参考路径，我需要在开头添加 ../ 才能使其正常工作。

答案 1 :(得分：80)

在定位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 和类型属性添加到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: The Future of Declaration Files

答案 2 :(得分：53)

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

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

答案 3 :(得分：48)

对于那些关注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

答案 4 :(得分：48)

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

typings install es6-promise es6-collections --ambient

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

npm install -g typings

<强>更新

typings update还没有阅读--ambient它也成了--global对于你需要安装上述库定义的人来说，只需使用以下命令

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

感谢 @bgerth 指出这一点。

答案 5 :(得分：32)

当使用Typescript＆gt; = 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)
    }
}

答案 6 :(得分：15)

Angular 2.0.0-rc.0添加node_modules/angular2/typings/browser.d.ts将不起作用。首先使用以下内容将typings.json file添加到您的解决方案中：

{
    "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 file获取更多信息。

答案 7 :(得分：13)

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

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

答案 8 :(得分：10)

我在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包。

答案 9 :(得分：7)

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

npm install -g typings
typings install

（使用ng 2.0.0-rc.1）

答案 10 :(得分：7)

我遇到了同样的问题，我使用.d.ts中的target选项解决了这个问题。正如basarat in his answer所述，TypeScript隐式包含lib文件，具体取决于编译compilerOptions选项，但可以使用es2015选项更改此行为。

您可以指定要包含的其他定义文件，而无需更改目标JS版本。例如，这是我对Typescript@2.1的当前"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

有关可用选项的完整列表，请查看official doc。

另请注意，我在代码中添加了require('some-module')并安装了padding以支持line-height。

答案 11 :(得分：5)

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

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

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

尝试@ angular-2.0.0-rc3

答案 12 :(得分：4)

如果npm install -g typings typings install仍无效，请在执行此命令之前删除 node_modules 和 typings 文件夹。

答案 13 :(得分：4)

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

在我的情况下，我从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"
    ]
}

答案 14 :(得分：4)

我是Angular的新手，但对我来说，只需输入Input即可找到解决方案。不能归功于这个，在另一个板上找到它。如果您遇到同样的问题，这是一个简单的修复，但如果您的问题更复杂，我会阅读上面的内容。

穆克什：

  

你必须在子组件

的顶部导入这样的输入 
import { Directive, Component, OnInit, Input } from '@angular/core';

答案 15 :(得分：3)

我在Angular 2的网站上找到了this very helpful doc。它最终让我让事情正常工作，而另一个答案，安装打字，让我失败了各种错误。 （但帮助我朝着正确的方向前进。）

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

答案 16 :(得分：3)

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

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

在输入.d.ts中声明这一点之后，应用程序中的错误将不会出现在应用程序中..

答案 17 :(得分：2)

接受的答案并没有提供可行的解决方案，而大多数其他答案都提出了＆＃34;三重斜线＆＃34;由于browser.d.ts已被Angular2最新的RC删除，因此不再可用，因此不再可行。

我强烈建议按照这里的几个解决方案的建议安装typings模块，但没有必要手动或全局执行 - 这是一种有效的方法您的项目仅在VS2015界面内。以下是您需要做的事情：

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

那就是它。

您还可以查看我的博客上的this other SO thread和/或阅读this post了解更多详情。

答案 18 :(得分：2)

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

import 'rxjs/add/operator/map';

答案 19 :(得分：2)

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

如果您正在使用gulpfile将文件复制到输出目录，那么您可能仍然有node_modules/angular坐在那里，这可能会被编译器拾取并使其自身混乱。

因此（仔细）清除node_modules中针对测试版的内容，并删除任何旧版本并重新运行typings install。

答案 20 :(得分：2)

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

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

在我的tsconfig中，也可以阻止es6-shim本身的错误

答案 21 :(得分：0)

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

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

答案 22 :(得分：0)

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

enter image description here

所以对我唯一有效的解决方法是重新启动VSCode

答案 23 :(得分：0)

这可能是因为您缺少导入。

示例：

src / app / products / product-list.component.ts：15：15中的

ERROR-错误 TS2304：找不到名称“ IProduct”。

确保要在文件顶部添加导入：

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

答案 24 :(得分：-3)

更新ERROR in ./~/react-portal/build/portal.js Module not found: Error: Cannot resolve module 'react/lib/CSSPropertyOperations' in /Users/thomas/react-airbnb/node_modules/react-portal/build @ ./~/react-portal/build/portal.js 17:29-71 ，更改

tsconfig.json

到

"target": "es5"
相关问题
最新问题