エラーTS2304：ビルド：Angular 4にアップグレードした後、名前 'Iterable'が見つかりません
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」をターゲットにするか、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"
}
}
それらのlibをすべて含めた後に「反復可能」なものが見つからないのはどうしてですか？ TypeScriptコンパイラーは、tsconfig.jsonを無視しません。いくつかのオプションを変更すると、さまざまな出力が得られますが、エラーなしでは出力されないためです。
私の環境は、TypeScript Tools 2.4.1を備えたVisual Studio 2015 update 3です。私はnpn @types（タイピングなし）を使用しています。詳細なコンパイル出力は、Visual Studioが2.4.1バージョンを効果的に使用していることを示しています。
そして最も奇妙なことは、gulpを使用してコンパイルすると、同じTypeScriptバージョンとtsconfigを使用してエラーが発生しないことです。
プロジェクトではなく、環境全体をアップグレードすると、うまくいきました。 VS2017にアップグレードすると、すべてが正常にコンパイルされます。
VS2015以外のほとんどすべてを再インストールしたにもかかわらず、おそらくインストールに破損がありました。
助けてくれてありがとう。
'Iterable'は、ノードのタイピングファイルで定義されます。問題を解決したインストールファイル（node_modules/@types/node/index.d.ts）。
npm install @types/node --save-dev
これは、ここで説明する内容と非常によく似ています。
https://github.com/DefinitelyTyped/DefinitelyTyped/issues/16939
ので、いずれかを使用してみてください
"target": "es6"
そこに記載されているように-または私たちのために働くもの：
"target": "es5",
"lib": ["es2016","dom"]
angularなど）のように、メジャーアップデートや変更が行われた後にこれらのエラーが表示されるようになるには、さまざまな理由が考えられます。
問題を修正して特定する最も簡単な方法は、ビルドファイルと構成ファイルを手動でクリーンアップし、ノードモジュールを再インストールしてからプロジェクトを再構築することです。
次の内容を削除することから始めます。
./dist
./node_modules
package-lock.jsonを削除[〜＃〜] not [〜＃〜]package.json
以下を実行します。
ng update
npm update
npm install
これにより、Angularプロジェクトがすべて最新であり、コンパイル中に表示されなかった問題がリストされる可能性があるため、出力に注意してください。angularコンパイラは時々誤解を招くことが好きです。
最後にangularプロジェクト：
ng build
このshouldは問題を特定し、すべてのパス、構成などが再構築されるようにします。
注：ng build --watchを使用している場合、またはコンパイラエラーを識別できないように見える場合、注意が必要なことの1つは、バックグラウンドで問題がハングアップする可能性があることです。実際には%40themeのコピーだと思うディレクトリ/dist。ソリューションエクスプローラーにこのディレクトリは表示されません。これらのコンパイラエラーが発生する場合は、存在しないはずのディレクトリとファイルを探して削除し、プロジェクトをクリーンアップし、VSを再度開いてng buildを再実行してください
それでも物事が完全にうまくいかない場合は、いつでも完全なブルートフォースクリーンを試して、問題を修正または特定することができます。
上記のディレクトリを削除してから、VSプロジェクトで以下を削除します。
<Project>/bin/*
<Project>/obj/*
これらは、VSがコンパイル済みの.dllファイルとその他のリソースを保持する場所です。これにより、VSはすべてを再構築します。
ソリューションをクリーニングしてから、ソリューション全体を再構築してください。
最善の解決策は、非推奨の型指定を排除し、実際に必要な型を@typesとしてインストールすることです
複雑なタイピングがある場合、これは良いガイドです。
https://georgedyrra.com/2017/06/04/migrating-from-typings-to-npm-types/
これが私の解決済みの構成です。 package.jsonファイルを手動で編集するのではなく、npm installを使用してangular 2から5にアップグレードするのが本当に役立ちます。
私の問題をグーグルで調べたときに最近この質問に出くわしましたが、これらのどれも私の問題を解決しませんでした。掘り下げなければなりませんでしたが、最終的に、ルートTypeScriptファイルの先頭にes6定義ファイルを含める必要があることがわかりました。
///<reference path="./node_modules/TypeScript/lib/lib.es6.d.ts"/>
更新：以下のソリューションは、私にとって展開の問題を引き起こしていました。より良い解決策は、tsconfig.jsonフォルダー内のすべてのnode_modulesファイルのみをソリューションから除外することでした。 this Visual Studioの問題に関連しているようです。
同じバージョンのVisual StudioとTypeScriptで同様の問題が発生しました。 Visual Studio Codeでは、すべてが期待どおりに機能していました。私は他の投稿された提案を役に立たなかった...それを修正した唯一のことは、プロジェクトから
node_modulesフォルダーを除外することでしたが、ソリューションに残しました。