错误 TS2304：Build:Cannot 在升级到 Angular 4 后找到名称 'Iterable'

Question

我正在使用 Typescript 2.4.1 并升级了我项目中的许多包。其中我将Angular从2升级到4.3.1。在 @types 包中进行多次更正后，我留下的错误是：

\node_modules\@types\jquery\index.d.ts(2955,63): error TS2304: Build:Cannot find name 'Iterable'.
\node_modules\@types\three\three-core.d.ts(767,24): error TS2304: Build:Cannot find name 'Iterable'.
\node_modules\@types\three\three-core.d.ts(771,24): error TS2304: Build:Cannot find name 'Iterable'.
\node_modules\@types\three\three-core.d.ts(775,24): error TS2304: Build:Cannot find name 'Iterable'.
\node_modules\@types\three\three-core.d.ts(779,24): error TS2304: Build:Cannot find name 'Iterable'.
\node_modules\@types\three\three-core.d.ts(783,24): error TS2304: Build:Cannot find name 'Iterable'.
\node_modules\@types\three\three-core.d.ts(787,24): error TS2304: Build:Cannot find name 'Iterable'.
\node_modules\@types\three\three-core.d.ts(791,24): error TS2304: Build:Cannot find name 'Iterable'.
\node_modules\@types\three\three-core.d.ts(795,24): error TS2304: Build:Cannot find name 'Iterable'.
\node_modules\@types\three\three-core.d.ts(799,24): error TS2304: Build:Cannot find name 'Iterable'.

我找了很多类似的问答，主流的解决办法是针对"es2015" and/or 添加lib: ["dom", "es2015", "es2015.iterable"]. 我已经尝试了所有这些以及更多，但仍然存在相同的 'Iterable' 错误。

我更新后的 tsconfig.json 是这样的：

{
    "compileOnSave": true,
    "compilerOptions": {
        "declaration": false,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "lib": [ "dom", "dom.iterable", "es2015", "es2015.iterable", "esnext" ],
        "module": "commonjs",
        "moduleResolution": "node",
        "noImplicitAny": true,
        "noEmitOnError": true,
        "outDir": "./wwwroot/js",
        "removeComments": false,
        "rootDir": "./Client",
        "sourceMap": true,
        "suppressImplicitAnyIndexErrors": true,
        "target": "es2015",
        "typeRoots": [
            "./node_modules/@types",
            "./Client"
        ]
    },
    "exclude": [
        "node_modules",
        "wwwroot/lib"
    ],
    "filesGlob": [
        "./Client/**/*.ts"
    ]
}

我的package.json是：

{
    "version": "1.0.0",
    "name": "web-server",
    "private": true,
    "dependencies": {
        "@angular/common": "^4.3.1",
        "@angular/compiler": "^4.3.1",
        "@angular/core": "^4.3.1",
        "@angular/forms": "^4.3.1",
        "@angular/http": "^4.3.1",
        "@angular/platform-browser": "^4.3.1",
        "@angular/platform-browser-dynamic": "^4.3.1",
        "@angular/router": "^4.3.1",
        "@angular/upgrade": "^4.3.1",
        "bootstrap": "3.3.7",
        "core-js": "2.4.1",
        "lodash": "4.17.4",
        "pixi.js": "4.5.4",
        "reflect-metadata": "0.1.10",
        "rxjs": "^5.4.2",
        "systemjs": "0.20.17",
        "three": "0.86.0",
        "zone.js": "0.8.14"
    },
    "devDependencies": {
        "@types/chai": "^4.0.1",
        "@types/jquery": "3.2.9",
        "@types/lodash": "4.14.71",
        "@types/mocha": "2.2.41",
        "@types/pixi.js": "4.5.2",
        "@types/three": "0.84.19",
        "bower": "^1.8.0",
        "gulp": "3.9.1",
        "gulp-clean": "^0.3.2",
        "gulp-concat": "^2.6.1",
        "gulp-typescript": "^3.2.1",
        "gulp-inline-ng2-template": "^4.0.0",
        "gulp-sourcemaps": "^2.6.0",
        "gulp-tsc": "^1.3.2",
        "gulp-uglify": "^3.0.0",
        "merge2": "^1.1.0",
        "path": "^0.12.7",
        "rimraf": "^2.6.1",
        "systemjs-builder": "^0.16.9",
        "typescript": "2.4.1"
    },
    "scripts": {
        "gulp": "gulp",
        "rimraf": "rimraf",
        "bundle": "gulp bundle",
        "postbundle": "rimraf dist"
    }
}

为什么在所有这些库包含之后找不到 "iterable"？ Typescript 编译器不会忽略我的 tsconfig.json，因为更改某些选项会提供各种输出，但 none 没有错误。

我的环境是 Visual Studio 2015 update 3 with Typescript Tools 2.4.1。我正在使用 npn @types（无打字）。详细的编译输出显示 Visual Studio 有效地使用了 2.4.1 版本。

最奇怪的是使用相同的 Typescript 版本和 tsconfig 使用 gulp 编译没有错误。

Answer 1

这看起来很像这里描述的内容：

https://github.com/DefinitelyTyped/DefinitelyTyped/issues/16939

所以要么尝试使用

"target": "es6"

如那里所述 - 或者对我们有用的：

"target": "es5",
"lib": ["es2016","dom"]

Answer 2

更新： 下面的解决方案导致了我的部署问题。更好的解决方案是仅从解决方案中排除 node_modules 文件夹中的所有 tsconfig.json 文件。似乎与 this Visual Studio 问题有关。

I had a similar issue with the same versions of Visual Studio and TypeScript. Everything was working as expected in Visual Studio Code. I tried the other posted suggestions to no avail... the only thing that fixed it was to exclude the node_modules folder from my project but leave it in the solution.

Answer 3

升级我的整个环境，而不是项目，成功了。我升级到 VS2017，现在一切都可以正常编译了。

尽管我重新安装了除 VS2015 本身之外的几乎所有内容，但我的安装可能存在损坏。

感谢大家的帮助。

Answer 4

最近在谷歌搜索我的问题时遇到了这个问题，其中 none 解决了我的问题。我不得不进行一些挖掘，但最终发现我必须将 es6 定义文件包含到我的根打字稿文件的顶部：

///<reference path="./node_modules/typescript/lib/lib.es6.d.ts"/>

Answer 5

'Iterable' 在节点的类型文件中定义。安装文件为我解决了问题 (node_modules/@types/node/index.d.ts).

npm install @types/node --save-dev

Answer 6

最好的解决方案是消除不推荐使用的类型并安装您自己实际需要的类型作为@types

如果您有复杂的输入，这是一个很好的指南：

https://georgedyrra.com/2017/06/04/migrating-from-typings-to-npm-types/

这是我解决的配置。使用 npm install 从 angular 2 升级到 5 确实很有帮助，而不是尝试手动编辑 package.json 文件。

Typings seems utterly messed up after converting project from angular 2 to angular 5

Answer 7

我发现在进行任何类型的重大更新或更改（例如升级 angular 后，开始看到这些错误的原因可能有多种。

我发现修复和识别任何问题的最简单方法是手动清理所有构建和配置文件，重新安装节点模块，然后重建项目。

首先删除以下内容：

./dist
./node_modules

删除 package-lock.json 不 package.json

运行以下:

ng update
npm update
npm install

这将确保您的 Angular 项目都是最新的，请注意输出，因为它可能会列出编译期间未出现的问题，angular编译器有时喜欢误导。

最终重建您的 angular 项目：

ng build

这应该找出任何问题并确保重建所有路径、配置等。

注意： 如果您正在使用 ng build --watch 或似乎无法识别编译器错误，请注意一件事，事情可能会挂起在后台，我注意到还有一个目录 %40theme，我认为它实际上是 /dist 的副本。该目录不会显示在您的解决方案资源管理器中，如果您开始遇到这些编译器错误，请尝试查找不应该存在的目录和文件并删除它们，清理项目，重新打开 VS 并重新运行 ng build

如果事情仍然完全失败，您可以随时尝试完全暴力清理来尝试修复或发现问题：

删除上面列出的目录，然后在您的 VS 项目中删除以下内容：

<Project>/bin/*
<Project>/obj/*

这些是 VS 保存编译后的 .dll 文件和其他资源的地方，这将迫使 VS 重建所有内容。

清理您的解决方案，然后尝试重建整个解决方案。

错误 TS2304：Build:Cannot 在升级到 Angular 4 后找到名称 'Iterable'

error TS2304: Build:Cannot find name 'Iterable' after upgrading to Angular 4

iterable

typescript

angular