Angular and Typescript: Can't find names - Error: cannot find name
Angular and Typescript: Can't find names - Error: cannot find name
我将 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);
已知问题：https://github.com/angular/angular/issues/4902
核心原因：TypeScript 隐式包含的 .d.ts 文件因编译目标而异，因此在目标 es5 时需要有更多的环境声明，即使运行时确实存在（例如 chrome）。更多关于 lib.d.ts
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):
///<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.)
确保你有正确的参考路径，我需要在开头添加 ../ 才能正常工作。
对于那些在 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
对于 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
现在您也应该忽略 tsconfig.json 文件中的 typings 文件夹：
"exclude": [
"node_modules",
"typings/main",
"typings/main.d.ts"
]
更新
现在 AngularJS 2.0 使用 core-js 而不是 es6-shim。按照其快速入门 typings.json file 了解更多信息。
打得好，@VahidN，我发现我需要
"exclude": [
"node_modules",
"typings/main",
"typings/main.d.ts"
]
在我的 tsconfig 中也是如此，以阻止来自 es6-shim 本身的错误
我可以通过安装 typings 模块来解决这个问题。
npm install -g typings
typings install
（使用 ng 2.0.0-rc.1）
我能够使用以下命令修复此问题
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 指出这一点。
我在 Angular 2 rc1 上得到了这个。事实证明，与旧 0.x 相比，v1 中的一些名称发生了变化。 browser.d.ts 个文件变成了 index.d.ts.
在 运行 typings install 之后找到您的启动文件（您 bootstrap 所在的位置）并添加：
/// <reference path="../typings/index.d.ts" />（如果您的启动文件与 typings 文件夹位于同一文件夹中，则不带 ../）
将 index.d.ts 添加到 tsconfig.json 中的文件列表由于某种原因失败。
此外，不需要 es6-shim 包。
Angular 2 RC1 将 node_modules/angular2 目录重命名为 node_modules/angular.
如果您使用 gulpfile 将文件复制到输出目录，您可能仍然有 node_modules/angular 坐在那儿，它可能会被编译器拾取并混淆它本身。
所以（小心地）清除你在 node_modules 中的 Beta 版本的内容，并删除所有旧的类型并重新 运行 typings install.
针对 ES5 时，未定义 promise 等 ES6 功能。还有其他库，但 core-js 是 Angular 团队使用的 javascript 库。它包含 ES6 的 polyfill。
Angular 2 自从提出这个问题以来发生了很大变化。 Typescript 2.0 中的类型声明更容易使用。
npm install -g typescript
对于 Angular 2 中的 ES6 功能，您不需要 Typings。只需使用 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 的博客 post：Typescript: The Future of Declaration Files
可以在.ts文件的开头添加代码
/// <reference path="../typings/index.d.ts" />
我在 Angular 2 的网站上找到了 this very helpful doc。它终于让我让事情正常工作，而这里的其他答案，安装打字，让我失败了各种错误。 （但帮助我朝着正确的方向前进。）
它不包括 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 上试过
已接受的答案没有提供可行的修复方法，大多数其他答案建议使用 "triple-slashes" 解决方法，但该方法不再可行，因为 browser.d.ts 已被最新的 Angular2 删除RC，因此不再可用。
我强烈建议按照这里的几个解决方案的建议安装 typings 模块，但没有必要手动或全局执行此操作 - 有一种有效的方法可以只为您的项目在 VS2015 中执行此操作界面。这是您需要做的：
- 在项目的 package.json 文件中添加
typings。
- 在
package.json 文件中添加一个 script 块到每个 NPM 操作后 execute/update typings。
- 在项目的根文件夹中添加一个
typings.json 文件，其中包含对 core-js 的引用（总体上优于 es6-shim atm）。
就是这样。
您还可以在我的博客上查看 and/or read this post 以了解更多详细信息。
如果 npm install -g typings typings install 仍然没有帮助，请在执行此命令之前删除 node_modules 和 typings 文件夹。
这就是认为每个人都在尝试做不同的事情。我相信这些系统离最终版本还很远。
就我而言，我从 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"
]
}
请在您的 JS 文件中导入以下语句。
import 'rxjs/add/operator/map';
在应用程序的主文件夹中添加 typing.d.ts 并在那里声明您每次要使用的变量
declare var System: any;
declare var require: any;
在 typing.d.ts 中声明后，应用程序中不会出现 require 错误..
更新tsconfig.json，更改
"target": "es5"
至
"target": "es6"
我遇到了同样的问题，我使用 tsconfig.json 中的 lib 选项解决了它。正如 所说，TypeScript 根据编译 target 选项隐式包含 .d.ts 文件，但可以使用 lib 选项更改此行为。
您可以在不更改目标 JS 版本的情况下指定要包含的其他定义文件。例如，这是我当前 compilerOptions for Typescript@2.1 的一部分，它增加了对 es2015 功能的支持而无需安装任何其他东西：
"compilerOptions": {
"experimentalDecorators": true,
"lib": ["es5", "dom", "es6", "dom.iterable", "scripthost"],
"module": "commonjs",
"moduleResolution": "node",
"noLib": false,
"target": "es5",
"types": ["node"]
}
有关可用选项的完整列表，请查看 official doc。
另请注意，我在代码中添加了 "types": ["node"] 并安装了 npm install @types/node 以支持 require('some-module')。
当 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)
}
}
我是 Angular 的新手，但对我来说，只需导入输入即可找到解决方案。不能相信这个，在另一个板上找到它。如果您遇到同样的问题，这是一个简单的解决方法，但如果您的问题更复杂，我会阅读上面的内容。
穆克什:
you have to import input like this at top of child component
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)
);
将我的开发分支合并到当前分支后出现此错误。我花了一些时间来解决这个问题。如下图所示，代码完全没有问题。
所以唯一对我有用的修复方法是 重新启动 VSCode
这可能是因为您缺少导入。
示例：
ERROR in src/app/products/product-list.component.ts:15:15 - error
TS2304: Cannot find name '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
我将 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);
已知问题：https://github.com/angular/angular/issues/4902
核心原因：TypeScript 隐式包含的 .d.ts 文件因编译目标而异，因此在目标 es5 时需要有更多的环境声明，即使运行时确实存在（例如 chrome）。更多关于 lib.d.ts
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):
///<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.)
确保你有正确的参考路径，我需要在开头添加 ../ 才能正常工作。
对于那些在 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
对于 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
现在您也应该忽略 tsconfig.json 文件中的 typings 文件夹：
"exclude": [
"node_modules",
"typings/main",
"typings/main.d.ts"
]
更新
现在 AngularJS 2.0 使用 core-js 而不是 es6-shim。按照其快速入门 typings.json file 了解更多信息。
打得好，@VahidN，我发现我需要
"exclude": [
"node_modules",
"typings/main",
"typings/main.d.ts"
]
在我的 tsconfig 中也是如此，以阻止来自 es6-shim 本身的错误
我可以通过安装 typings 模块来解决这个问题。
npm install -g typings
typings install
（使用 ng 2.0.0-rc.1）
我能够使用以下命令修复此问题
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 指出这一点。
我在 Angular 2 rc1 上得到了这个。事实证明，与旧 0.x 相比，v1 中的一些名称发生了变化。 browser.d.ts 个文件变成了 index.d.ts.
在 运行 typings install 之后找到您的启动文件（您 bootstrap 所在的位置）并添加：
/// <reference path="../typings/index.d.ts" />（如果您的启动文件与 typings 文件夹位于同一文件夹中，则不带 ../）
将 index.d.ts 添加到 tsconfig.json 中的文件列表由于某种原因失败。
此外，不需要 es6-shim 包。
Angular 2 RC1 将 node_modules/angular2 目录重命名为 node_modules/angular.
如果您使用 gulpfile 将文件复制到输出目录，您可能仍然有 node_modules/angular 坐在那儿，它可能会被编译器拾取并混淆它本身。
所以（小心地）清除你在 node_modules 中的 Beta 版本的内容，并删除所有旧的类型并重新 运行 typings install.
针对 ES5 时，未定义 promise 等 ES6 功能。还有其他库，但 core-js 是 Angular 团队使用的 javascript 库。它包含 ES6 的 polyfill。
Angular 2 自从提出这个问题以来发生了很大变化。 Typescript 2.0 中的类型声明更容易使用。
npm install -g typescript
对于 Angular 2 中的 ES6 功能，您不需要 Typings。只需使用 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 的博客 post：Typescript: The Future of Declaration Files
可以在.ts文件的开头添加代码
/// <reference path="../typings/index.d.ts" />
我在 Angular 2 的网站上找到了 this very helpful doc。它终于让我让事情正常工作，而这里的其他答案，安装打字，让我失败了各种错误。 （但帮助我朝着正确的方向前进。）
它不包括 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 上试过
已接受的答案没有提供可行的修复方法，大多数其他答案建议使用 "triple-slashes" 解决方法，但该方法不再可行，因为 browser.d.ts 已被最新的 Angular2 删除RC，因此不再可用。
我强烈建议按照这里的几个解决方案的建议安装 typings 模块，但没有必要手动或全局执行此操作 - 有一种有效的方法可以只为您的项目在 VS2015 中执行此操作界面。这是您需要做的：
- 在项目的 package.json 文件中添加
typings。 - 在
package.json文件中添加一个script块到每个 NPM 操作后 execute/updatetypings。 - 在项目的根文件夹中添加一个
typings.json文件，其中包含对core-js的引用（总体上优于es6-shimatm）。
就是这样。
您还可以在我的博客上查看
如果 npm install -g typings typings install 仍然没有帮助，请在执行此命令之前删除 node_modules 和 typings 文件夹。
这就是认为每个人都在尝试做不同的事情。我相信这些系统离最终版本还很远。
就我而言，我从 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"
]
}
请在您的 JS 文件中导入以下语句。
import 'rxjs/add/operator/map';
在应用程序的主文件夹中添加 typing.d.ts 并在那里声明您每次要使用的变量
declare var System: any;
declare var require: any;
在 typing.d.ts 中声明后，应用程序中不会出现 require 错误..
更新tsconfig.json，更改
"target": "es5"
至
"target": "es6"
我遇到了同样的问题，我使用 tsconfig.json 中的 lib 选项解决了它。正如 target 选项隐式包含 .d.ts 文件，但可以使用 lib 选项更改此行为。
您可以在不更改目标 JS 版本的情况下指定要包含的其他定义文件。例如，这是我当前 compilerOptions for Typescript@2.1 的一部分，它增加了对 es2015 功能的支持而无需安装任何其他东西：
"compilerOptions": {
"experimentalDecorators": true,
"lib": ["es5", "dom", "es6", "dom.iterable", "scripthost"],
"module": "commonjs",
"moduleResolution": "node",
"noLib": false,
"target": "es5",
"types": ["node"]
}
有关可用选项的完整列表，请查看 official doc。
另请注意，我在代码中添加了 "types": ["node"] 并安装了 npm install @types/node 以支持 require('some-module')。
当 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)
}
}
我是 Angular 的新手，但对我来说，只需导入输入即可找到解决方案。不能相信这个，在另一个板上找到它。如果您遇到同样的问题，这是一个简单的解决方法，但如果您的问题更复杂，我会阅读上面的内容。
穆克什:
you have to import input like this at top of child component
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)
);
将我的开发分支合并到当前分支后出现此错误。我花了一些时间来解决这个问题。如下图所示，代码完全没有问题。
所以唯一对我有用的修复方法是 重新启动 VSCode
这可能是因为您缺少导入。
示例：
ERROR in src/app/products/product-list.component.ts:15:15 - error TS2304: Cannot find name '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