typescript 错误 TS2304：构建：升级到 Angular 4 后找不到名称“Iterable”
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/45360993/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
error TS2304: Build:Cannot find name 'Iterable' after upgrading to Angular 4
提问by Oliver H.
I am using Typescript 2.4.1 and have upgraded many packages in my project. Among them I upgraded Angular from 2 to 4.3.1. After many corrections in @types packages, the errors I am left with are:
我正在使用 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'.
I have found many similar questions and answers and the prevailing solution is to target "es2015" and/or add lib: ["dom", "es2015", "es2015.iterable"]. I have tried all those and more but am still left with the same 'Iterable' error.
我发现了许多类似的问题和答案，普遍的解决方案是针对“es2015”和/或添加 lib：[“dom”、“es2015”、“es2015.iterable”]。我已经尝试了所有这些以及更多，但仍然存在相同的“可迭代”错误。
My updated tsconfig.json is thus:
我更新后的 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"
]
}
My package.json is:
我的 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"
}
}
How can it be that "iterable" is not found after all those lib inclusions? The Typescript compiler does not ignore my tsconfig.json as changing some option gives various outputs, but none without errors.
在所有这些 lib 包含之后，怎么可能找不到“可迭代的”？Typescript 编译器不会忽略我的 tsconfig.json，因为更改某些选项会提供各种输出，但都没有错误。
My environment is Visual Studio 2015 update 3 with Typescript Tools 2.4.1. I am using npn @types (no typings). Verbose compilation output shows that Visual Studio effectively uses the 2.4.1 version.
我的环境是带有 Typescript Tools 2.4.1 的 Visual Studio 2015 update 3。我正在使用 npn @types（没有打字）。详细的编译输出表明 Visual Studio 有效地使用了 2.4.1 版本。
And the most bizarre thing is that compiling using gulp gives no error using the same Typescript version and tsconfig.
最奇怪的是，使用 gulp 编译使用相同的 Typescript 版本和 tsconfig 不会出错。
采纳答案by Oliver H.
Upgrading my whole environment, not the project, did the trick. I upgraded to VS2017 and everything now compiles fine.
升级我的整个环境，而不是项目，成功了。我升级到 VS2017，现在一切都可以正常编译了。
There was probably a corruption in my install albeit I reinstalled nearly everything besides VS2015 itself.
尽管我重新安装了除 VS2015 本身之外的几乎所有东西，但我的安装可能存在损坏。
Thanks everyone for the help.
感谢大家的帮助。
回答by Will
'Iterable' is defined in the typings file for node. Installing file that solved the problem for me (node_modules/@types/node/index.d.ts).
'Iterable' 在节点的类型文件中定义。安装为我解决问题的文件（node_modules/@types/node/index.d.ts）。
npm install @types/node --save-dev
回答by Benjamin Seiller
This looks very much what is described here:
这看起来非常像这里描述的：
https://github.com/DefinitelyTyped/DefinitelyTyped/issues/16939
https://github.com/DefinitelyTyped/DefinitelyTyped/issues/16939
So either try using
所以要么尝试使用
"target": "es6"
as described there - or what works for us:
如那里所述-或对我们有用的方法：
"target": "es5",
"lib": ["es2016","dom"]
回答by Andy Braham
I have found that there could be a variety of reasons to start seeing these errors after any kind of major update or change, like upgrading angular for example.
我发现在进行任何类型的重大更新或更改（例如升级 angular）后，可能有多种原因开始看到这些错误。
The easiest way I have found to fix and identify any problems is to manually clean any build and config files, re-install the node modules and then rebuild the project.
我发现修复和识别任何问题的最简单方法是手动清理所有构建和配置文件，重新安装节点模块，然后重建项目。
Start by removing the contents of:
首先删除以下内容：
./dist
./node_modules
Remove package-lock.jsonNOTpackage.json
删除package-lock.jsonNOTpackage.json
Run the following:
运行以下命令：
ng update
npm update
npm install
This will make sure that your Angular project is all up-to-date, keep an eye on the output as it might list problems that did not show up during compilation, the angular complier likes to be misleading sometimes.
这将确保您的 Angular 项目都是最新的，密切关注输出，因为它可能会列出在编译期间没有出现的问题，角度编译器有时喜欢误导。
Finally rebuild your angular project:
最后重建你的角度项目：
ng build
This shouldidentify any problems and ensure that all the paths, configs and such are rebuilt.
这应该确定任何问题并确保所有路径、配置等都被重建。
Note:One thing to keep an eye out for if you are using ng build --watchor can't seem to identify a the compiler error, things can hang up in the background and I have noticed that there can also be a directory %40themewhich I think is actually a copy of /dist. This directory will not show up in your solution explorer, if you start having these compiler errors try looking for directories and files that shouldn't be there and remove them, clean the project, re-open VS and re-run ng build
注意：如果您正在使用ng build --watch或似乎无法识别编译器错误，请注意一件事，事情可能会在后台挂起，我注意到也可能有一个%40theme我认为实际上是一个目录的副本/dist。此目录不会出现在您的解决方案资源管理器中，如果您开始遇到这些编译器错误，请尝试查找不应该存在的目录和文件并将其删除，清理项目，重新打开 VS 并重新运行ng build
If things are still totally hosed, you can always try a full brute force clean to try and fix or identify problems:
如果事情仍然完全没有问题，您可以随时尝试完全蛮力清理以尝试修复或识别问题：
Remove the Directories listed above then in your VS Project remove the following:
删除上面列出的目录，然后在您的 VS 项目中删除以下内容：
<Project>/bin/*
<Project>/obj/*
These are where VS keeps the compiled .dll files and other resources, this will force VS to rebuild everything.
这些是 VS 保存已编译的 .dll 文件和其他资源的地方，这将强制 VS 重建所有内容。
Clean your solution and then try rebuilding the entire solution.
清理您的解决方案，然后尝试重建整个解决方案。
回答by Evan Larsen
Came upon this question recently when googling my problem and none of these solved my issue. I had to do some digging but finally found out that I had to include the es6 definition file to the top of my root typescript file:
最近在谷歌搜索我的问题时遇到了这个问题，但这些都没有解决我的问题。我不得不进行一些挖掘，但最终发现我必须将 es6 定义文件包含在我的根打字稿文件的顶部：
///<reference path="./node_modules/typescript/lib/lib.es6.d.ts"/>
回答by Charlah
Update:The solution below was causing deployment issues for me. A better solution was to only exclude all tsconfig.jsonfiles within the node_modulesfolder from the solution. Seems to be related to thisVisual Studio issue.
更新：下面的解决方案给我带来了部署问题。更好的解决方案是仅从解决方案中排除tsconfig.json文件node_modules夹中的所有文件。似乎与这个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_modulesfolder from my project but leave it in the solution.
我在使用相同版本的 Visual Studio 和 TypeScript 时遇到了类似的问题。在 Visual Studio Code 中一切都按预期工作。我尝试了其他发布的建议无济于事......唯一修复它的是
node_modules从我的项目中排除该文件夹但将其保留在解决方案中。
回答by GeeWhizBang
The best solution is to eliminate the deprecated typings and install the types you actually need yourself as @types
最好的解决方案是消除不推荐使用的类型并将您实际需要的类型安装为@types
this is a good guide if you have complicated typings:
如果您有复杂的类型，这是一个很好的指南：
https://georgedyrra.com/2017/06/04/migrating-from-typings-to-npm-types/
https://georgedyrra.com/2017/06/04/migrating-from-typings-to-npm-types/
This is my solved configuration. It really helps to use npm install to upgrade from angular 2 to 5, rather than trying to manually edit the package.json file.
这是我解决的配置。使用 npm install 从 angular 2 升级到 5 确实很有帮助，而不是尝试手动编辑 package.json 文件。
Typings seems utterly messed up after converting project from angular 2 to angular 5
