Angular 和 Typescript：找不到名称 - 错误：找不到名称

Posted 2023-03-13

技术标签:

【中文标题】Angular 和 Typescript：找不到名称 - 错误：找不到名称【英文标题】：Angular and Typescript: Can't find names - Error: cannot find name 【发布时间】：2016-01-24 18:20:17 【问题描述】：

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

【问题讨论】：

看来这里有问题github.com/angular/angular/issues/4902 尝试添加以下导入 import ROUTER_PROVIDERS from 'angular2/router'; 我遇到了同样的问题，出于某种原因，这为我解决了这个问题...？！？ 【参考方案1】：

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

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

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

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

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

【讨论】：

这为我解决了很多错误，但我仍然收到TS2304: Cannot find name 'module' 和TS2339: Property 'find' does not exist on type 'MyThing[]'. 之类的错误...有什么想法吗？如果你在一个用于重用的包中使用 Angular 怎么办？我尝试使用带有此引用的文件的包的任何应用程序都会在 tsc 构建时抱怨它找不到此引用。 Angular中新的包结构有没有解决方案，我在新的@angular/....结构中找不到browser.d.ts @I.devries 正确，他们已经删除了 browser.d.ts。这些文件现在是 index.d.ts，每个角度组件都需要一个文件，因为现在每个组件都单独安装在 rc.0 和更高版本中。您还需要安装“typings”——参见上面 Khaled Al-Ansari 和 theUtherSide 的回答。我通过添加解决了它： ///【参考方案2】：

在面向 ES5 时未定义诸如 Promise 之类的 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 和 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 的博文：Typescript: The Future of Declaration Files

【讨论】：

我认为“types”数组也属于“compilerOptions”对象。但除此之外，非常感谢，我整天都在努力解决这个问题。 @plexus 谢谢！您对 compilerOptions 是正确的。我确定了答案。感谢您的精彩帖子，但根据您提供的 URL，甚至不需要增加 tsconfig.json，它确实有效:) 至少它对我有用。所以你唯一需要做的就是安装所需的包如果您拥有的唯一条目是node_modules/@types，您甚至可以删除typeRoots。就像一个魅力。正如@ilya-chernomordik 所提到的，这也适用于我，而无需将TypeRoots 和Types 添加到tsconfig.json。在我的情况下，我还必须更新我的 Gulp gulp-typescript 2.x 插件，该插件使用和嵌入的 TypeScript 1 版本进行编译，但是一旦我更新了，所以我使用的是 TypeScript 2 并添加了 @types/core-js polyfill 我是放。非常感谢。【参考方案3】：

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

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

【讨论】：

那么解决办法是什么？ 2.0.0-alpha.45 很好，使用来自 node_modules/angular2/bundles/typings/**/*.d.ts 的类型 "angular2": "2.0.0-beta.3" 有效，但 beta.4 和 beta.5 似乎又出现了这个问题，至少在像 in the tutorial 这样配置你的项目时是这样的跨度> @Roj 我仍然在 beta 6 中看到了这个，但是在使用对 browser.d.ts 的引用时它确实有效万岁！ rc1 加入了这个。【参考方案4】：

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

【讨论】：

我使用 VS2015 MVC6 和 Angular2 beta.14，如果将参考线放在_references.js 中，它将不起作用。必须像这个答案所暗示的那样在组件内部。此外，路径使用../../ 而不是../。 @Hani 你找到解决方法了吗？我会尝试升级到 rc1 并尝试一下所以打字没有了。我想你需要单独安装它，当我这样做时，我也会添加很多无用的包。无论如何，即使完成了所有这些操作，typings 文件夹下也没有更多的browser.d.ts。只需.jsdist 下的文件。有一个名为typings.d.ts 的文件，所以我认为这是新文件，但它并没有解决问题。为“es6”构建工作，但 IE 抱怨。所以坚持使用'es5'构建并且没有打字！ :// @Hani 有一个新的答案。也许它会起作用？ npm install -g typings typings install 降级到 beta.15 并使用来自 typings 包的相同 .d.ts。还要满足 IE9+ 要求，必须为 es3 构建。【参考方案5】：

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

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 指出这一点。

【讨论】：

对我来说是typings install dt~es6-promise dt~es6-collections --global --save @bgerth 我猜它因为typings 更新而改变了，我会将您的解决方案添加到答案中 typings install dt~es6-promise dt~es6-collections --global --save 为我工作。此问题反复出现且断断续续...感谢此修复程序，希望它的工作时间超过一天。 typings install dt~es6-promise dt~es6-collections --global --save 也为我工作【参考方案6】：

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

【讨论】：

是的...添加 "lib": ["es2016", "dom"] 到我的 tsconfig.json 文件修复它这是正确的。请谨慎使用，因为其中声明的某些类型可能不存在。 @Niels Steenbeek 在这里正确。我在 Angular 2 和 4 课程的练习中遇到了同样的错误。但是，我的 lib 内容略有不同： "lib" : ["es2015", "es2015.iterable", "dom"]【参考方案7】：

对于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 了解更多信息。

【讨论】：

rc0github.com/angular/angular/issues/4902#issuecomment-216495769中存在此错误的问题【参考方案8】：

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

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

【讨论】：

这对我有用。无需全局安装类型。尝试稳定的角度 2。也为我工作，使用 Angular 2.0.0 (release)【参考方案9】：

我在 Angular 2 rc1 上得到了这个。结果发现一些名称随着类型 v1 与旧的 0.x 不同而改变。 browser.d.ts 文件变为 index.d.ts。

运行typings install 后，找到您的启动文件（您引导的位置）并添加：

/// <reference path="../typings/index.d.ts" />（如果您的启动文件与打字文件夹位于同一文件夹中，则不带../）

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

另外，不需要es6-shim 包。

【讨论】：

【参考方案10】：

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

npm install -g typings
typings install

（使用 ng 2.0.0-rc.1）

【讨论】：

"'typyings.json' 丢失。--（无依赖关系）"。当我在 app.ts 文件的同一文件夹中运行命令时，它会返回此错误。我应该在哪里找到这个 typings.json 文件，我应该什么时候运行该命令？【参考方案11】：

我遇到了同样的问题，我使用tsconfig.json 中的lib 选项解决了它。正如basarat in his answer 所说，.d.ts 文件由 TypeScript 隐式包含，具体取决于编译 targetoption，但可以使用 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')。

【讨论】：

【参考方案12】：

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

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

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

试过@angular-2.0.0-rc3

【讨论】：

当我们需要库项目中的 .d.ts 文件时，此解决方案非常有效。【参考方案13】：

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

【讨论】：

【参考方案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"
    ]

【讨论】：

这也解决了我的问题。 RC 版本的目标似乎是 es6。您现在不再以 ES5 为目标。如果有的话，请更改"lib"，而不是"target"。【参考方案15】：

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

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

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

【讨论】：

【参考方案16】：

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

穆克什：

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

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

【讨论】：

【参考方案17】：

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

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

【讨论】：

【参考方案18】：

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

所以唯一对我有用的是重新启动 VSCode

【讨论】：

【参考方案19】：

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

如果您使用 gulpfile 将文件复制到输出目录，您可能仍然有 node_modules/angular 坐在那里，它可能会被编译器拾取并搞糊涂。

所以（小心地）清除 node_modules 中用于测试版的内容，并删除所有旧类型并重新运行 typings install。

【讨论】：

或者……在其他方面工作 4 个月，然后等待最终版本从头开始（这就是我正在做的）【参考方案20】：

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

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

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

【讨论】：

【参考方案21】：

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

import 'rxjs/add/operator/map';

【讨论】：

我正在推迟将项目升级到最新版本，因此将 import './rxjs-extensions'; 添加到我的 app.component.ts 与 angular2 教程中的 rxjs-extensions 文件（包括您建议的行），它似乎已删除这些错误。您能否说得更具体一些。哪个JS文件？ Typescript 编译的那个？主要？【参考方案22】：

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

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

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

就是这样。

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

【讨论】：

【参考方案23】：

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

例子：

src/app/products/product-list.component.ts:15:15 中的错误 - 错误 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】：

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

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

【讨论】：

【参考方案25】：

更新tsconfig.json，改

"target": "es5"

到

"target": "es6"

【讨论】：

这可能会导致您的 JavaScript 输出与旧版浏览器不兼容。

以上是关于Angular 和 Typescript：找不到名称 - 错误：找不到名称的主要内容，如果未能解决你的问题，请参考以下文章

TypeScript 错误：找不到命名空间“google”

Angular：找不到 Promise、Map、Set 和 Iterator

TypeScript 找不到名称 Weakmap、Map 等

Typescript 在我的指令中找不到范围或属性

Typescript instanceof - 找不到名称

Angular 2+ 找不到 Angular 1.X 来引导