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

Question

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:

\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.

My updated tsconfig.json is thus:

{
    "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:

{
    "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.

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.

And the most bizarre thing is that compiling using gulp gives no error using the same Typescript version and tsconfig.

Answer 1

'Iterable' is defined in the typings file for node. Installing file that solved the problem for me (node_modules/@types/node/index.d.ts).

npm install @types/node --save-dev

Answer 2

This looks very much what is described here:

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"]

Answer 3

Upgrading my whole environment, not the project, did the trick. I upgraded to VS2017 and everything now compiles fine.

There was probably a corruption in my install albeit I reinstalled nearly everything besides VS2015 itself.

Thanks everyone for the help.

Answer 4

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.

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.json NOT package.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.

Finally rebuild your angular project:

ng build

This should identify 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 --watch or 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 %40theme which 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

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:

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

These are where VS keeps the compiled .dll files and other resources, this will force VS to rebuild everything.

Clean your solution and then try rebuilding the entire solution.