Angular和Typescript: Can't find names -错误:找不到名字

小开

最佳答案

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

核心原因:TypeScript隐式包含的.d.ts文件随着编译目标的不同而不同，所以在针对es5时需要有更多的环境声明，即使实际存在于运行时(例如chrome)。关于lib.d.ts的更多信息

小开

在2.0.0-beta.6(2016-02-11)的更新日志中提到了一个解决方案(在突破性更改中列出):

如果你使用——target=es5，你需要在你的应用程序的某个地方添加一行(例如，在你调用bootstrap的.ts文件的顶部):

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

(请注意，如果您的文件与node_modules不在同一个目录中，则需要添加一个或多个../到路径的起点。)

确保你有正确的引用路径，我需要在开始添加. . /来让它工作。

小开

对于那些遵循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);

请注意，您在///中保留正斜杠，不要删除它们。

裁判: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将不起作用。首先将打字。json文件添加到您的解决方案中，内容如下:

{
"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。跟随它的快速开始打字。json文件获取更多信息。

小开

@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更新不读取--ambient，它变成了--global，对于一些需要安装上述库定义的人，只需使用以下命令

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

感谢@bgerth指出这一点。

小开

我在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包也不需要。

小开

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

如果你使用gulpfile将文件复制到输出目录，你可能仍然有node_modules/angular在那里，它可能会被编译器拾取，并使自己混乱。

因此(小心地)清除你在node_modules中为beta版本所拥有的内容，并删除任何旧的类型并重新运行typings install。

小开

ES6的特性，比如承诺，在针对ES5时没有定义。还有其他库，但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

然后，在tsconfig.json中添加TypeRoots和类型属性:

{
"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简单得多。有关更多信息，请参阅微软的博客文章:Typescript:声明文件的未来

小开

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

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

小开

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

它没有包含es6-promise和es6-collections，而是包含了core-js，这对我来说很有用……不与Angular2的核心ts定义冲突。此外，该文档还解释了如何在安装NPM时自动设置所有这些，以及如何修改你的类型。json文件。

小开

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

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

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

在@angular-2.0.0-rc3上尝试

小开

公认的答案并没有提供一个可行的解决方案，大多数其他的建议是“三重斜杠”的解决方案，这已经不可行了，因为browser.d.ts已经被Angular2最新的RC删除了，因此不再可用。

我强烈建议安装typings模块，就像这里的几个解决方案所建议的那样，但这并不需要手动或全局执行——有一种有效的方法只针对你的项目，并且在VS2015接口中执行。以下是你需要做的:

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

就是这样。

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

小开

如果npm install -g typings typings install仍然不起作用，请在执行该命令前删除node_modules和打字文件夹。

小开

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

在我的例子中，我从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选项。正如在他的回答中所说，.d.ts文件被TypeScript隐式包含，这取决于编译的__abc3选项，但这种行为可以通过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"]
}

要获得可用选项的完整列表，请检查官方文档。

还要注意，我在代码中添加了"types": ["node"]并安装了npm install @types/node以支持require('some-module')。

小开

当Typescript >= 2时，tsconfig中的"lib"选项。Json就可以了。不需要Typings。https://www.typescriptlang.org/docs/handbook/compiler-options.html

{
"compilerOptions": {
"target": "es5",
"lib": ["es2016", "dom"] //or es6 instead of es2016(es7)
}
}

小开

我是Angular的新手，但对我来说，只需导入Input就能找到解决方案。这不是我的功劳，在另一块黑板上找到的。如果你有同样的问题，这是一个简单的解决方法，但如果你的问题更复杂，我会阅读上面的东西。

穆克什:

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

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

小开

这可能是因为您遗漏了一个导入。

例子:

确保你在文件的顶部添加了导入:

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